标签:import class div get from style 操作 size data-
localResizeIMG插件的功能是将图片进行压缩,然后转换成base64传给后台。
首先,
1 npm i lrz -save
然后,再main.js里面引入lrz
import lrz from ‘lrz‘
最后就可以在组件里使用
1 <input type="file" @change="uploadImg($event)" id="file" accept="image/*" class="uploadImg" multiple>
1 uploadImg(e){ 2 let that=this; 3 let imgFiles=e.target.files; 4 if(e.target.files.length+that.showImgsrc.length>=4){ 5 MessageBox("提示", "最多只能三张图片,请重新上传"); 6 }else{ 7 for(var i=0;i<imgFiles.length ; i++ ){ 8 lrz(imgFiles[i]) 9 .then(function (rst) { 10 // 处理成功会执行 11 that.showImgsrc.push(rst.base64); 12 }) 13 .catch(function (err) { 14 // 处理失败会执行 15 console.log(err); 16 }) 17 .always(function () { 18 // 不管是成功失败,都会执行 19 }); 20 } 21 } 22 },
因为我是多图上传,所以showImgsrc是一个base64格式的图片形成的数组,然后展示在页面上,也可以传给后台接口,进行后面的操作。
vue 移动端上传图片结合localResizeIMG插件进行图片压缩
标签:import class div get from style 操作 size data-
原文地址:https://www.cnblogs.com/zr123/p/11991861.html