转载注明原文地址：http://www.jianshu.com/p/c2a5be9a54b3
一.技术选型---常见多媒体上传框架对比
| 可选方案 | WebUploader | Element | LocalResizeIMG |
|---|---|---|---|
| 开发者 | 百度 | 饿了么 | 民间大神（think2011） |
| 类型 | 完整的前后端上传框架 | 上传控件 | js 库（包含图片压缩，剪裁等各种图片处理方法） |
| 引入难度 | 复杂，需要引入各种 css 样式，引入过程各种坑 | 简单，引入控件即可，与 mint-ui 类似 | 简单，引入 js 文件即可 |
| 优点 | 大厂，完整的解决方案 | 引入方便，与 mint-ui 类似 | 体积小，可定制性强 |
| 缺点 | 自定义UI困难，自定义上传过程困难 | Web 控件，与手机端样式不符 | 无UI需自定义UI |
WebUploader 和 Element 虽说是大厂的成熟产品，但是不符合我们公司的业务场景，因此我选择了LocalResizeIMG 来重写一个多媒体上传控件
二.开发过程
图片上传分为下面几个过程
设备上选取图片 -> 图片处理（生成缩略图，压缩等等） -> 上传图片到服务器
代码实现
1.设备上选取图片
html
注：此处不要用 accept="image/jpeg,image/jpg,image/png"，否则微信端可能不识别，android则需要重写
WebChromeClient 的 openFileChooser 和 onShowFileChooser 实现自己的选择图片相关逻辑
js
addMedia() {
let vm = this;
$('input[type=file]').trigger('click');
return false;
},
2.照片处理
js（实测 lrz 可将 4M 的图片压缩到 30kb 左右，分辨率压缩到 480 * 640 ，压缩大小可自己定义）
onFileChange: function (e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImage(files, e);
},
createImage: function (file, e) {
let vm = this;
//调用 lrz 函数库对图片进行处理
lrz(file[0], {width: 480,fieldName:'file1'}).then(function (rst) {// fieldName 为 formData 中多媒体的字段名
vm.imgUrls.push(rst.base64);//用于图片显示
vm.formDatas.push(rst.formData);//保存 form 用于后面进行上传
return rst;
}).always(function () {
// 清空文件上传控件的值
e.target.value = null;
});
},
3.图片上传
js
saveImage: function (index) {//上传第 index 张图片
let vm = this;
//数据传输操作, XMLHttpRequest 进行表单上传
var xhr = new XMLHttpRequest();
xhr.open('POST',上传地址);
xhr.onload = function () {
var data = JSON.parse(xhr.response);
if (xhr.status === 200&&data&&data.success) {
// 上传成功
} else {
// 处理错误
}
};
xhr.onerror = function (err) {
};
if (xhr.upload) {
try {
xhr.upload.addEventListener('progress', function (e) {
});
} catch (err) {
}
}
var formData=vm.formDatas[index]
//定义上传参数
let param=“param”
// 添加参数
formData.append('param', param);//添加上传参数
// 触发上传
xhr.send(formData);
/* ==================================================== */
},
四.最终实现效果
image.png
五.源码
以后有时间会发布源码