vue2.0使用weui.js的uploader组件上传图片
来源:互联网 发布:mac截屏软件免费下载 编辑:程序博客网 时间:2024/05/01 18:48
vue2.0使用weui.js的uploader组件上传图片(兼容移动端)
最近在使用 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
uploadImage 上传图片接口, 返回图片的服务器端ID
downloadImage 通过serverId 下载图片到自己的服务器
总结:
优点: 移动端兼容性强, 可指定是原图还是压缩图等参数, 代码简洁, 便于上手
缺点: (1) 只能在移动端使用,无法在PC端使用; (2) 采用流程为: 先上传微信服务器, 然后下载拿到图片, 最后存到自己的服务器, 这种方式开发逻辑冗杂, 上传下载也耗费过多资源; (3)目前多媒体文件下载接口的频率限制为10000次/天, 业务稍微多些,容易受接口频率限制.
二. 使用微信开源的 weui.js
使用流程为:
1. 安装jquery
2. 在 /build/webpack.base.conf.js 文件中 配置 jquery 别名
3. 下载 weui.js项目,并在本地打包编译
git clone https://github.com/weui/weui.js.gitcd weui.jsnpm installnpm run build
4. 将编译后dist目录下的 weui.min.js 复制到 我们的 vue 项目 /static/js/ 目录下
5. 安装 weui, 并在 main.js 中导入weui.min.css
npm install --save weui // 安装weuiimport 'weui/dist/style/weui.min.css' // 在main.js中导入weui.min.css
6. 在我们项目的vue文件中 引入 weui 的UI布局 Uploader
<div class="weui-cells weui-cells_form" id="uploader"> <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">图片上传</p> <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles" @click="handleClickUploadList"></ul> <div class="weui-uploader__input-box"> <input name="file" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple=""/> </div> </div> </div> </div> </div> </div>
7. 在我们的vue文件中 导入 weui.js 和jquery
8.在javascript中定义变量
9. 在 vue文件 的 mounted 函数中调用weui.js的uploader方法
10. 定义图片预览与删除的函数
- vue2.0使用weui.js的uploader组件上传图片
- valums file-uploader: js文件上传组件
- fine uploader文件上传JS组件
- weui upLoader
- WEUI.Uploader
- 功能强大的HTML5上传组件-Web Uploader
- HTML5功能强大的上传组件-Web Uploader
- Web Uploader上传组件
- weui 上传图片
- Fine Uploader文件上传组件
- Fine Uploader文件上传组件
- Fine Uploader文件上传组件
- springmvc使用ssi-uploader批量上传图片及后台接受
- springmvc使用ssi-uploader批量上传图片及后台接受
- Plupload js插件 使用pluploadQueue实例化uploader文件上传
- Image Uploader 图片上传工具
- 基于spring 的ssi-uploader的多图片上传
- weui.js slider的使用笔记
- $.ajax()方法详解
- 关于生命周期
- JAVA集合之---LinkedList、ArrayList与Vector
- Android点击EditText文本框之外任何地方隐藏键盘的解决办法
- 一天写多少行代码才算是好程序员?
- vue2.0使用weui.js的uploader组件上传图片
- 记录问题-vs 2013编程
- JAVA的四种引用
- C_day06 c访问java属性和方法
- HTML字符转义与反转义
- 【帝国CMS】如何用灵动标签调用副表字段内容?
- Spring Boot中使用Redis数据库
- 网络编程的一些问题
- Android Studio项目将Module依赖(lib)转成jar包