vant组件中图片上传对图片进行压缩处理

1.vant组件进行图片上传需要借助

    <van-uploader
        v-model.trim="item.fileList"
                :after-read="uploadImg"
                :before-read="beforeRead"
                accept="image/*"
        ></van-uploader>

2.对图片进行压缩就在after-read事件中进行处理，直接看代码吧：

	uploadImgs(file) {
      // 大于2.5MB的jpeg和png图片都缩小像素上传
      if (/\/(?:jpeg|png)/i.test(file.file.type) && file.file.size > 2500000) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement("canvas");
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext("2d");
        // 创建新的图片对象
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content;
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 400;
          canvas.height = 300;
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/

          context.drawImage(img, 0, 0, 400, 300);
          // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
          file.content = canvas.toDataURL(file.file.type, 0.92);
          // 最后将base64编码的图片保存到数组中，留待上传。
        };
      }

3.一般来说后端只需要个图片名和图片的base64就可以了，使用vant传图片时，你可以在after-read中进行后台请求完成上传，也可以最后统一上传，统一上传的时候，如果后端读参数抛出异常，需要注意一下前端上传图片的参数是不是File，status，content等等都给传递了，如果是，那么自己对这些参数处理一下就好，不用的参数可以去掉，用delet可以去掉不用的参数，例如：

      let imgData = this.list;

      imgData.forEach(ele => {
         ele.fileList.forEach(element => {
           delete element.file;
           delete element.status;
           delete element.content;
         });
       });
       

至于图片校验，限制，展示，vant文档都比较详细，可以看看文档即可