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

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

    <van-uploader
        =""
                :after-read="uploadImg"
                :before-read="beforeRead"
                accept="image/*"
        ></van-uploader>

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

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

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

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

      let imgData = ;

      (ele => {
         (element => {
           delete ;
           delete ;
           delete ;
         });
       });
       

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