Vue 上传图片

去年公司做的微信端项目，用的Vue，现在有时间，总结下图片上传。

图片这块我用的是vant-ui，肯定要在项目中导入vant-ui。主要是在afterRead()方法中，对图片进行压缩，然后再上传。

这是删除方法：

下面是图片处理方法的代码，图片上传的url要改成自己的

afterRead(item) {

     item.status ='uploading';

      item.message ='上传中...';

      let formData =new FormData();

  // 最大尺寸限制，可通过设置宽高来实现图片压缩程度

  let maxWidth =500,

      maxHeight =500;

  let file = item.file;

  let reader =new FileReader(),

      img =new Image();

  reader.readAsDataURL(file);

  // 文件base64化，以便获知图片原始尺寸

  reader.onload =function(e) {

img.src = e.target.result;

  };

  new Promise((resolve, reject) =>{

img.onload =function() {

let originWidth =this.width;

      let originHeight =this.height;

      // 目标尺寸

      let targetWidth = originWidth,

        targetHeight = originHeight;

      // 压缩图片

      if(originWidth > maxWidth || originHeight > maxHeight) {

if(originWidth / originHeight > maxWidth / maxHeight) {

targetWidth = maxWidth;

          targetHeight = Math.round(maxWidth * (originHeight / originWidth));

        }else {

targetHeight = maxHeight;

          targetWidth = Math.round(maxHeight * (originWidth / originHeight));

        }

}

// 创建画布

      let canvas = document.createElement('canvas');

      canvas.width = targetWidth;

      canvas.height = targetHeight;

      // 清除画布

      let context = canvas.getContext('2d');

      context.clearRect(0, 0, targetWidth, targetHeight);

      // 图片压缩

      context.drawImage(img, 0, 0, targetWidth, targetHeight);

      // base64 转 file

      let newUrl = canvas.toDataURL('image/jpeg', 0.92);

      file = _self.dataURLtoFile(newUrl, file.name);

      formData.append(file.name, file);

      // 新建请求

      const xhr =new XMLHttpRequest();

      xhr.open('POST', _self.utils.rootUrl+'repairCross/upload', true)

xhr.send(formData);

      xhr.onload = () => {

if (xhr.status ===200 || xhr.status ===304) {

let datas = JSON.parse(xhr.responseText);

          // 上传成功

          if (datas.state ==1) {

let response = datas.data;

            // console.log('response = ', response);

            item.status ='done';

            item.message ='上传成功';

            // _self.uploadImgUrl.push(response.fileId);

            resolve(response.fileId);

          }

}

else {

reject();

          console.log('上传失败');

        }

}

}

}).then((fileId) => {

// console.log('fileId = ', fileId);

    this.uploadImgUrl.push(fileId);

  });

},

使用的时候，首先到导入这个组件

导入组件 引入

    要获取图片的id时，直接用 this.$refs.uploader.uploadImgUrl   就可以。

希望可以帮到有需要的同学。