使用vant uploader组件

<van-uploader v-model="fileList" capture="camera" :max-count="5" upload-icon="plus" :before-read="beforeRead" />

在图片上传前压缩图片

 beforeRead(file) {
      return this.compressImg(file);
    },

图片压缩方法

compressImg(fileObj) {
      return new Promise((resolve, reject) => {
        let quality = 0.7; //压缩系数0-1之间
        let reader = new FileReader();
        reader.readAsDataURL(fileObj);
        reader.onload = function(e) {
          let image = new Image();     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
          image.src = e.target.result;    //让该标签加载base64格式的原图
          image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
            let canvas = document.createElement('canvas'), //创建一个canvas元素
                context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
                imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
                imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
                data = '';    //存储压缩后的图片
            canvas.width = imageWidth;    //设置绘图的宽度
            canvas.height = imageHeight;   //设置绘图的高度

            //使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
            context.drawImage(image, 0, 0, imageWidth, imageHeight);
            //使用toDataURL将canvas上的图片转换为base64格式
            data = canvas.toDataURL('image/jpg', quality);
            // 如想确保图片压缩到自己想要的尺寸,如要求在50-128kb之间，请加以下语句，quality初始值根据情况自定
            while (data.length / 1024 > 128) {
              quality -= 0.01;
              data = canvas.toDataURL("image/jpg", quality);
            }
            // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
            while (data.length / 1024 < 50) {
              quality += 0.001;
              data = canvas.toDataURL("image/jpg", quality);
            }
            canvas.toBlob(function (blob) {
                const f = new File([blob], fileObj.name,{type: 'image/jpg'});
                resolve(f);
            },'image/jpg')
          }
        }
      })