weex学习之路(二)---组件封装(3)--图片上传
来源:互联网 发布:大数据的实践包括哪些 编辑:程序博客网 时间:2024/06/07 15:29
图片上传是一个很常用的功能,所以做了一个简单的封装,代码如下
<template><image @click="uploadImage" :src="uploadFileTipImage" :style="uploadNativeStyle"></image> </template> <script>import GlobalApiConfig from "../api/config/GlobalAipConfig";import weexUtils from "../utils/WeexUtils";const actionSheet = weex.requireModule('actionSheet');const photo = weex.requireModule('photo');const nat_camera = weex.requireModule('nat_camera');const nat_network_transfer = weex.requireModule('nat_network_transfer');//图片服务器地址const PIC_SERVICE_URL = GlobalApiConfig.PIC_SERVICE_URL;const PIC_SERVICE_DOMAIN = GlobalApiConfig.PIC_SERVICE_DOMAIN;export default { props: { //上传的提示图片 uploadFileTipImage: { type: String, default: "" }, //上传区域宽度 width: { type: Number, default: 200 }, //上传区域高度 height: { type: Number, default: 200 }, //是否自动上传 autoUpload: { type: Boolean, default: true }, //上传的文件类型 accept: { type: String, default: "*", }, //可以选择的最大文件数量 selectedMaxNum: { type: Number, default: 1 }, type: { //上传类型用来区分在一个页面有多个文件上传的时候来区分具体回调操作 type: String, default: "upload" }, orderNumber: { type: Number, default: 0 }, //裁图比例 proportion: { type: Array, default: [1, 1] }, crop: { default: true }, radius:{ //圆角大小 default:0 } }, data() { const width = this.width; const height = this.height; let uploadNativeStyle = { width: width + "px", height: height + "px", }; return { uploadNativeStyle } }, methods: { uploadByNative(filePath) { const self = this; console.log("上传filePath:" + filePath); nat_network_transfer.upload({ url: PIC_SERVICE_URL, path: filePath }, (result) => { console.log("-result-> " + JSON.stringify(result)); const {data, ok, progress} = result; console.log(data); console.log(ok); if (progress) { console.log("上传中!"); return; } if (!ok) { console.log("上传失败!"); return; } if (data == null) { console.log("上传无结果!"); return; } const resp = JSON.parse(data); const {url} = resp; const map = {}; result = { orderNumber: self.orderNumber, url: PIC_SERVICE_DOMAIN+ url } console.log("map-> " + JSON.stringify(map)); self.$emit("uploadCallback", { result, type: this.type, callback: function (width = 200, height = 200) { self.uploadNativeStyle = { width: width + "px", height: height + "px" } } }); }); }, chooseImage() { //在原生环境下先选择图片 //http://natjs.com/#/reference/media/image const items = []; items[0] = {'type': 0, 'message': '拍照'}; items[1] = {'type': 0, 'message': '从相册取'}; items[2] = {'type': 1, 'message': '取消'}; const self = this; actionSheet.create({ 'items': items, 'title': '提示', 'message': '请选择' }, (ret) => { let result = ret.result; console.log("-图片选择或拍照结果-> " + JSON.stringify(ret)); if (result !== 'success') { console.log("图片选择或拍照失败"); return; } const {value, index} = ret.data; const proportion = {}; if (self.proportion.length === 0) { //表示不限制 } else { proportion.aspectX = self.proportion[0]; proportion.aspectY = self.proportion[1] } const {aspectX, aspectY} = proportion; let flag = index === 0; photo.capture(flag, this.crop, {aspectX: aspectX, aspectY: aspectY}, (data) => { console.log("local path-> " + data); if (data === undefined || data === null) { weexUtils.toast("图片选择出现异常!"); return; } self.uploadByNative(data); }, (message) => { weexUtils.toast(message); }); }); }, uploadImage(event) { this.chooseImage(); } }, beforeMount() { console.log("this.rudius-> "+this.radius); if (this.radius>0) { this.uploadNativeStyle.borderRadius = this.radius + "px"; } }} </script><style scoped></style> 这个组件完全依赖了原生模块,其中3个是weex插件市场提供的,在官网上可以找到。photo模块需要客户端实现,提供图片裁剪,图片压缩等功能
阅读全文
0 0
- weex学习之路(二)---组件封装(3)--图片上传
- weex学习之路(二)---组件封装(1)
- weex学习之路(二)---组件封装(2)--下拉刷新和上拉加载
- (大架构师之路)-微信多图片上传组件代码封装
- weex学习之路(一)--项目快速创建
- weex开发实战(8)--在weex页面实现图片上传
- 上传组件uploadify封装
- ASP.NET学习笔记(二)——一般处理程序之图片上传
- 微信小程序学习之路(二) ------ 组件
- H5学习之路-图片上传(cropper、webuploader)
- Bootstrap学习笔记之组件(二)
- android学习之-图片上传
- weex学习(二):接入iOS端
- flex图片上传(封装)
- Android学习之 有关图片缓存问提的代码封装<二>
- 阿里巴巴开源框架Weex学习之 weex pack与weex toolkit的区别
- 封装之路 (二)BaseActivity
- MVC 封装之二(3-2)
- java 解析 xml 笔记
- Delphi版 环形无锁缓冲(二)
- 快速字符串模糊匹配--基于Horspool的模糊匹配算法
- 数学家破解婚恋网站配对程序,90天找到灵魂伴侣
- 爬虫 Python安装Scrapy库报错:Unable to find vcvarsall.bat
- weex学习之路(二)---组件封装(3)--图片上传
- Ubuntu 永久修改主机名
- 01-SQL语言
- ABAP: Excel
- Java API
- Element.requestFullScreen() -- 全屏显示
- 文章标题
- Remote connection by VNC in CentOS 7
- RTF文件格式研究报告