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

localResizeIMG插件的功能是将图片进行压缩，然后转换成base64传给后台。

首先,

 npm i lrz -save

然后，再main.js里面引入lrz

import lrz from 'lrz'

最后就可以在组件里使用

 <input  type="file" @change="uploadImg($event)" id="file" accept="image/*" class="uploadImg" multiple>

  uploadImg(e){

         let that=this;

         let imgFiles=e.target.files;

         if(e.target.files.length+that.showImgsrc.length>=4){

           MessageBox("提示", "最多只能三张图片，请重新上传");

         }else{

           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               });

           }

         }

       },

因为我是多图上传，所以showImgsrc是一个base64格式的图片形成的数组，然后展示在页面上，也可以传给后台接口，进行后面的操作。

巴特西

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

最新文章

热门文章