vue+axios上传文件

页面是用elementUi搭建的，之所以没有用upload组件是因为没有支持裁剪图片功能
本文采用vue-cropper组件，如有需要，请自行阅读文档。

• 相关代码如下：（此为核心代码，非全部代码）

<vueCropper
 ref="cropper"
 :img="cropperOption.img"
 :outputSize="cropperOption.size"
 :outputType="cropperOption.outputType"
 :autoCrop="cropperOption.autoCrop"
 :autoCropWidth="cropperOption.autoCropWidth"
 :autoCropHeight="cropperOption.autoCropHeight"
 :fixedBox="cropperOption.fixedBox"
 :original="cropperOption.original"
 @realTime="realTime"
 ></vueCropper>

// data
// 裁剪组件的基础配置option
 cropperOption: {
 img: "", // 裁剪图片的地址
 size: 1, // 裁剪生成图片的质量
 outputType: "png", // 裁剪生成图片的格式
 autoCrop: true, // 是否默认生成截图框
 autoCropWidth: 150,
 autoCropHeight: 150,
  fixedBox: true, // 固定截图框大小 不允许改变
  original: false, // 上传图片按照原始比例渲染
 },

// method
    realTime(data) {
      this.previews = data;
    },

// 此方法为base64转blob格式，再将获取到的blob塞到FormData里，就能得到二进制文件
    convertBase64UrlToBlob(urlData) {
      var arr = urlData.split(",");
      let mine = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      console.log(urlData.split(",")[0].match(/:(.*?);/)[1]);

      console.log(mine);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr]);
    },
cropperFinish() {
      this.loading = true;
      //获取截图的二进制数据
      /*this.$refs.cropper.getCropBlob((data) => {
                //上传服务器
                var form = new FormData();
                form.append("file", data);
                var xhr = new XMLHttpRequest();
                //xhr.onload = uploadComplete; // 添加 上传成功后的回调函数
                //xhr.onerror =  uploadFailed; // 添加 上传失败后的回调函数
                xhr.open("POST", '/userCenter/changePhoto2', true);
                xhr.send(form);
            })*/
      //获取截图的base64数据
      this.$refs.cropper.getCropData((data) => {
        // console.log(data);
        let file = new FormData();
        file.append(
          "file",
          this.convertBase64UrlToBlob(data),
          "avata." +
            data
              .split(",")[0]
              .match(/:(.*?);/)[1]
              .split("/")[1]
        );
      // 此处为后台需要的headers
        var configs = {
          headers: {
            "Content-Type": "multipart/form-data", // 指定formData格式
            Authorization: getAccessToken(), // token，根据各自需要
            timestamp: String(new Date().getTime()),
            sign: "",
          },
        };
        // 文件上传，api自己封装的
          fileApi.upload(file, configs).then((res) => {
          console.log(imgPrefix);
        // 拼接完整路径
          this.imgSrc = imgPrefix + res.data.name;
          this["dialogVisible"] = false;
          this.formInfo.photoUrl = res.data.id;
        });
        // fileApi.uploadBase64({
        //     'file': data,
        //     'fileName': this.uploadImgName+'.png',
        //     'fileSize': this.getImgByteSize(data)*1000,
        // }).then(res => {
        //     this.formInfo.photoUrl = res.data.fileId
        //     this.downloadPhoto(res.data.fileId, 'dialogVisible')
        // }).finally(()=>{
        //     this.loading = false
        // })
      });
    },

这里通过base64转二进制，一定要在FormData指定类型，如iamge/png,否则后台收到的是blob，地址返回的是没有后缀名的
下面是设置和未设置的后台收到数据的对比，第二个后台返回的数据中没有后缀名

right.png
error.png