vant+compressorjs 图片压缩+上传

直奔主题！

vant 上传文件的用法，可以看官方文档

<!-- v-model双向绑定 multiple可多选 ref用来再次调起选择图片：解释vant提供的chooseFile通过 ref 可以获取到Uploader实例并调用实例的方法重新调起文件选择 :after-read 和 :preview-image vant方法看官方文档 -->
        
      <van-uploader
        class="unShow"
        v-model="imgList" 
        multiple
        ref="ups"
        :after-read="afterRead"
        :preview-image="false"/>
export default {
    data () {
        return {
            imgList: [],
            filepic:[],
        }
    },
}

// 单独记录一下，就不写关于button的部分了
// 写一下关于ref的解释 直接按钮事件就可以重新掉起选择图片
upsClick(){
      // console.log(this.$refs.ups)
      // vant提供的chooseFile通过 ref 可以获取到 Uploader 实例并调用实例的方法重新调起文件选择
      this.$refs.ups.chooseFile()
    },

选择完图片 后打印afterRead,这个里面就是图，如果不需要压缩，直接对接接口传base64给后端

afterRead(file) {
   console.log(file)
}

我这边后端伙伴 后来发现图太大有时候接口会出问题，所以增加了压缩图片

用的 js库 compressorjs 

安装 compressorjs 

 npm install compressorjs

引用  compressorjs 

import Compressor from 'compressorjs'

代码里直接可以用了  可以在 success（）{} 中直接调用接口，去完成上传，我这里是单独拿出来，然后再给到接口入参中实现的，

上传功能，直接调用后端接口按着需要的入参参数给就行了，我这里后端要的事base64然后拿到base64之后直接给后面就完事。

afterRead(file) {
      var that = this
      // 此时可以自行将文件上传至服务器
      console.log(file,'00')
      // console.log(file.length == undefined,'00')
        // 根据图大小来选择压缩质量
        let quality=1
        if(file.file.size<1000*1000){ //小于1M
          quality=0.8
        }else if(file.file.size<5000*1000){ //小于5M
          quality=0.5
        }else if(file.file.size<10000*1000){ //小于10M
          quality=0.3
        }else{ //大于10M
          quality=0.1
        }
        new Compressor(file.file, {
          quality: quality,
          success(result) {
            console.log(result,'result')
            // 因为直接压缩完后是 Blob 所以转一下
            // 转file文件
            let file = new File([result], result.name, { type: result.type })
            console.log(file,'file')
            // 转成base64
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
              // 返回一个base64  这个就是base64 -> e.target.result
              let obj01 = {}
              obj01.content = e.target.result
              obj01.mode = 'new'
              that.filepic.push(obj01) // 拿到 用来接口入参给
            };
          },
        });
    },

大概就是这样，第一次写关于压缩的，记录一下