参考网址
http://blog.csdn.net/tkg09/article/details/68947082
https://www.npmjs.com/package/lrz
https://github.com/think2011/localResizeIMG/blob/master/test/index.js
执行tnpm i lrz
1.dom
<a href="javascript:;" class="a-upload" title="上传">
<input type="file" @change="onFileChange($event,index)" accept="image/jpeg,image/jpg,image/png">上传
</a>
2.js
压缩后获取 rst.base64
onFileChange: function(e, index) {
var files = e.target.files || e.dataTransfer.files;
var size = e.target.files[0].size / 1024;
if (size > 4000) {
alert("附件不能大于4M");
event.target.value = "";
return
}
if (!files.length) return;
this.createImage(files, e, index);
},
createImage: function(file, e, index) {
let self = this;
lrz(file[0], {
width: 800,
height: 800,
quality: 0.7,
}).then(function(rst) {
// vm.imgUrls.push(rst.base64);
for (var i in self.applyUploadImages) {
if (i == index) {
self.applyUploadImages[i].ImageData.LargeContent = rst.base64;
self.applyUploadImages[i].isUpload = true;
} else {
self.applyUploadImages[i].isUpload = false;
}
}
return rst;
}).always(function() {
// 清空文件上传控件的值
e.target.value = null;
});
},
网友评论