vue 移动端上传图片结合localResizeIMG插件进行图片压缩

Posted 2020-11-24 zr123

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格式的图片形成的数组，然后展示在页面上，也可以传给后台接口，进行后面的操作。