vant 图片上传

    afterRead (event) {
      //console.log(event)
      event.status = 'uploading';
      event.message = '上传中...';
      if (/\/(?:jpeg|png)/i.test(event.file.type) && event.file.size > 500000) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement('canvas');
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d');
        // 创建新的图片对象
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = event.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为默认压缩质量
          //console.log(event.file.type);
          event.content = canvas.toDataURL(event.file.type, 0.92);
          //console.log(event.content);
          let config = {
            headers: {
              //添加请求头
              'Content-Type': 'multipart/form-data'
            }
          };
          let file = this.dataURLtoFile(event.content, 'image');
          //console.log(file)
          // 此时可以自行将文件上传至服务器
          var formData = new FormData();
          formData.append('file', event.content);
          formData.append('extension', file.type.split('/')[1]);//.toLowerCase()
          this.$axios.post('/common/appUploadFile', formData, res => {
            if (res.msg === '操作成功') {
              event.status = '';
              event.message = '';
              this.files.push(res.id)
            } else {
              event.status = 'failed';
              event.message = '上传失败';
              alert('图片上传失败,请重试,或者调整图片大小')
            }
          });
        };
      } else {
        let file = event
        // 此时可以自行将文件上传至服务器
        var formData = new FormData();
        formData.append('file', file.content);
        formData.append('extension', file.file.name.split('.')[1].toLowerCase());
        this.$axios.post('/common/appUploadFile', formData, res => {
          if (res.msg === '操作成功') {
            file.status = '';
            file.message = '';
            this.files.push(res.id)
          } else {
            file.status = 'failed';
            file.message = '上传失败';
            alert('图片上传失败,请重试,或者调整图片大小')
          }
        });
      }   
    }