Vue.js 2.0 移动端拍照压缩图片预览及上传实例

this.createImage(files, e);
},
createImage: function(file, e) {
let vm = this;
lrz(file[0], { width: 480 }).then(function(rst) {
vm.imgUrls.push(rst.base64);
return rst;
}).always(function() {
// 清空文件上传控件的值
e.target.value = null;
});
},
delImage: function(index) {
let vm = this;
let btnArray = ['取消', '确定'];
mui.confirm('确定删除该图片?','提示', btnArray, function(e) {
if (e.index == 1) {
vm.imgUrls.splice(index, 1);
}
})

},
previewImage: function(url){
let vm = this;
vm.isPreview = true;
vm.previewImg = url;
},
closePreview: function(){
let vm = this;
vm.isPreview = false;
vm.previewImg = "";
},
saveImage: function(){
let vm = this;
let urlArr = [],
imgUrls = this.imgUrls;

for(let i = 0; i < imgUrls.length; i++) {
if(imgUrls[i].indexOf('file') == -1) {
urlArr.push(imgUrls[i].split(',')[1]);
} else {
urlArr.push(imgUrls[i]);
}
}

//数据传输操作
}
}
}

</script>

1.点击拍照或选择图片 addPic

在vue.js中出发拍照和选择图片是频繁操作行为，每次只能拍照或选择一张图片，可以拍多张上传，使用给click事件加上.stop的修饰符，.stop – 调用 event.stopPropagation() ，是为了停止冒泡。accept是为了规定通过文件上传来提交的文件的类型，capture是webApp中捕获到系统默认的设备，camera–照相机；camcorder–摄像机；microphone–录音。

   

在触发拍照行为的时候绑定change事件 onFileChange 获取file文件对象，然后调用lrz方法压缩图片，在imgUrls数组中添加基于base64格式的图片。

lrz(file[0], { width: 480 }).then(function(rst) {
   vm.imgUrls.push(rst.base64);
   return rst;
  }).always(function() {
  // 清空文件上传控件的值
  e.target.value = null;
  });
lrz(file, [options]);

file： 通过 input:file 得到的文件，或者直接传入图片路径。

[options] ：这个参数允许忽略。

    width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度；
    height {Number} 同上；
    quality {Number} 图片压缩质量，取值 0 – 1，默认为0.7；
    fieldName {String} 后端接收的字段名，默认：file；

返回结果是一个promise对象，有then()、catch()、always三个方法。

then(rst)：

    rst.formData 后端可处理的数据；