axios + vue-cropper 如何上传base64或者blob格式的截图

Question

先问个题外话，cropper截图支持获取base64和blob格式的数据，这两个有什么区别，如果我从后台，通过以下方式获取file的话，适合哪种格式

HttpServletRequest request
List<MultipartFile> files = ((MultipartHttpServletRequest)request).getFiles("file");

正题，vue-cropper获取截取的图片的信息后，前台如何上传到后台，且后台能用以上方式接收

我封装的axios请求方法部分代码如下

  updateUserIcon(){
    return request({
      url:'user/updateUserIcon',
      method:'post',
    })
  }

以前向后台传递参数都是如下，注：data用的是qs在全局中格式化了的，最后使用格式和parmas一样（好像多说了什么废话）

parmas(data):{
 openID:'123465'
}

这个时候，如果是文件呢，我就不晓得了，再加上还是base64或者blob格式的，更懵逼了，希望有会的大佬能细心说一下，不然新手怕是接受不了

Answer 1

根据你的后台代码看，应该后台文件是接收文件，而不是base64
这是我当时发送给七牛的代码，或许你可以参考下

  async saveBack() {
    let file = ioUtil.dataURLtoFile(this.backCropper.getCroppedCanvas().toDataURL());
    this.user.background = URL.createObjectURL(file);
    this.uploadBackLoading = true;
    let result = await this.upload(file, "back");
    this.uploadBackLoading = false;
    if (result.status !== 200) {
      this.$notify({message: result.message});
      return;
    }
    this.isShowTailoringBack = false;
  }
  
  

这里是ioUtil.dataURLtoFile的代码

  dataURLtoFile(dataurl, filename = 'file') {
    let arr = dataurl.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let suffix = mime.split('/')[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {type: mime})
  },