vue上传图片并压缩

需求：点击用户头像选择本地图片压缩上传到服务器

这里用vant UI组件的Uploader 文件上传

• 按需加载 Uploader 

import {Uploader} from 'vant';
Vue.use(Uploader)

• 在dom上

<van-uploader :after-read="updateFile" accept="image/jpg" :max-size="10485760" @oversize="fileMax">
        <img :src="imgLink+userInfo.pic" class="userImg"/>
        <img src="../../assets/image/mine/photo.png" class="photo-img">
      </van-uploader>

• fileMax方法是文件超出时提示

fileMax(msg){
        this.$toast.fail("请选择小于10M的图片")
        return
      },

• updateFile是文件读取完成后的回调函数

在这里处理压缩后上传服务器逻辑

updateFile(file){
        lrz( file.file, {
          width : 300,
          quality: 0.4    //图片压缩质量，取值0-1，默认为0.7
        }).then((rst) => {
            //成功时执行
            console.log('成功',rst)
            
          //上传文件流数据
          //上传参数为formData对象
          uploadFile(rst.formData).then(res=> {
            //上传成功
          })
          }).catch((error) => {
          console.log('失败',error)
          //失败时执行
        }).always(() =>{
          //不管成功或失败，都会执行
        })
      },

这里压缩使用的插件是lrz

先安装：npm i lrz

然后在组件使用：import lrz from 'lrz'