elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.

最近在使用 vue2.0开发微信公众号网页 其中涉及到 选择图片, 图片的压缩上传, 预览, 删除等操作。

项目整体UI框架使用的是 vux, 但可惜的是 vux 并没有提供 图片上传组件, 理由见 issue

由于之前写PC端后台系统时, 采用的 Element UI框架 Upload组件 来上传图片, 包括预览删除等功能,但是引用该组件到移动端时, 却由于该组件的input标签属性和事件方法设置问题,不能正常使用. 鉴于此, 需要寻找一种可靠的方案,既能兼容移动端, 又便于直接上手.

以下是本人尝试的两种方案, 最终我选择的是第二种: 引入weui.js, 并自定义上传动作,异步获取七牛token, 然后调用手动上传方法.

一. 使用微信jssdk图像上传接口 微信网页开发文档

整个流程为:

(1) 显示图片

chooseImage 得到选定照片的本地ID列表

getLocalImgData 得到图片的base64数据，可以用img标签显示. (此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题)

(2) 拿到图片 File