码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-12-05 22:36:10      阅读:157      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!