vue移动端图片压缩上传（图片文件方式）

1. vue移动端经常使用到图片上传功能，由于现在手机拍摄的照片文件较大，直接上传的话需等待时间过长造成用户体验不好，这里用到一个简单易用的插件 localResizeIMG ，具体代码如下：
2. 首先安装包 npm install lrz
3. 在main.js中引入 import lrz from 'lrz'
4. 使用

fileChange(el) {
//以图片文件方式上传
  let _this = this;
  if (this.limit !== undefined) this.limit--;
  if (this.limit !== undefined && this.limit < 0) return;
	  lrz( el.target.files[0],{quality: 0.3} )  
            .then(function(rst) {
                //成功时执行
                const fd = rst.formData;
				axios.defaults.withCredentials = true
				axios({
					method: 'post',
					headers: {
                        'Content-Type': 'multipart/form-data',
					},
					url: '此处为请求的url',
					data: fd
				}).then(function(response) {
					if(response.status == '200') {
                        let fileUrls = response.data;
                        let obj= {};
                        obj.fileName = fileUrls.substring(fileUrls.lastIndexOf("\/")+1);
                        obj.fileUrl = response.data
                        _this.imgList.push(obj)
                    }
				}).catch(function(error) {
					console.log(error);
				})


            }).catch(function(error) {
                //失败时执行
            }).always(function() {
                //不管成功或失败，都会执行
            })
            },

5.顺便把图片上传标签和样式放上来，可以直接拿来用

              <div class="pictrue">
                  <h3>照片凭证</h3>
                  <!-- 照片上传模块 -->
                  <!-- 原生上传按钮，直接隐藏，另外自己写结构显示 -->
                  
                  <!-- 照片显示列表 -->
                  <div class="add-img" v-if="imgList.length">
                      <p class="font14">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张)</p>
                      <ul class="img-list">
                          <li v-for="(url,index) in imgList" :key="index">
                              <img class="del" src="../../../static/img/closeTwo.png" @click.stop="delImg(index)"/> 
                              <img :src="url.fileUrl" class="showPic">
                          </li>
                      </ul>
                  </div> 
                  <!-- 添加图片按钮-->
                  <div class="add">
                      <!-- <input @change="fileChange($event)" type="file" id="upload_file" ref="upload_file" name="image" multiple/> -->
                      <input @change="fileChange($event)" type="file" id="upload_file" ref="upload_file" name="file" multiple/>
                      <div class="add-image" align="center">
                          <i class="fa fa-camera"></i>
                          <p class="font13">添加图片</p>
                      </div>
                  </div> 

              </div>

样式

 .pictrue{
     padding-bottom:.7rem;
     width: 92%;
     margin: 0 auto;
     h3{
          font-size: .7rem;
           height: 2rem;
           line-height: 2rem;
                }
.font14{
    margin-bottom:.5rem;
    color:#aaa;
}
//预览图
    .img-list {
        overflow: hidden;
    }

    .img-list > li {
        float: left;
        width: 33.3%;
        text-align: center;
        // padding-top: 31%;
        // margin-left: 1%;
        // margin-top: 1%;
        margin-bottom:.5rem;
        position: relative;
        .showPic{
            width: 5rem;
            height: 5rem;
            border-radius: .5rem;
            // margin-left:.35rem;
        }
    }

    .del {
        position: absolute;
        width: 1.2rem;
        top: 0;
        right: .6rem;
        z-index: 999
    }


                .add {
                    display: inline-block;
                    position: relative;
                    width: 3rem;
                    height: 3rem;
                    input[type=file] {
                           position: absolute;
                           left: 0;
                           top: 0;
                           width: 3rem;                        
                           height: 3rem;  
                           opacity: 0;                      
                    }
                }
            
                .add-image {
                    display:flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;  
                    width: 3rem;
                    height: 3rem;
                    border: 1px dashed rgba(0, 0, 0, .2);
                    // border-radius: 5px;
                    .font13{
                      font-size:.6rem;
                      color:#aaa;
                    }
                    i{
                      font-size: 1rem;
                    }
                    
                }

            }

最后显示效果如下