Javascript Ionic-如何将base64映像上载到需要多部分文件的Spring引导端点？

我有一个Spring引导端点，它需要一个多部分文件来上传配置文件图片：

@RequestMapping(value="/picture", method=RequestMethod.POST)
public ResponseEntity<Void> uploadProfilePicture(@RequestParam(name="file") MultipartFile file) {
    URI uri = service.uploadProfilePicture(file);
    return ResponseEntity.created(uri).build();
}

上面的离子代码工作正常：拍摄的图片存储在我的

picture

变量中，我还可以使用

元素在屏幕上看到它

现在我想把这张照片发送到我的端点，但我不知道怎么做。基本思想是从服务调用

uploadPicture

方法：

sendPicture() {
  this.clientService.uploadPicture(this.picture)
    .subscribe(response => {
      ...
    },
    error => {
      ...
    });
}

然后在服务类中实现该方法：

uploadPicture(picture) {
    let formData: FormData = new FormData();
    formData.append('file', picture);
    return this.http.post(
        `${API_CONFIG.baseUrl}/clientes/picture`, 
        formData,
        { 
            observe: 'response', 
            responseType: 'text'
        }
    ); 
}

我不确定是否有必要将base64图片转换为blob或其他什么。无论如何，我从后端收到一个MissingServletRequestPartException：“所需的请求部分‘文件’不存在”

---

那么，如何将base64映像上载到需要多部分文件的Spring引导端点？

您需要将base64数据转换为blob，然后发送它

dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ab], {type: mimeString});
    return blob;

  }

dataURItoBlob（dataURI）{
var byteString=atob（dataURI.split（'，'）[1]）；
var mimeString=dataURI.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]
var ab=新阵列缓冲区（byteString.length）；
var ia=新的UINT8阵列（ab）；
for（var i=0；i

---

检查此链接我添加了FormData实例化，现在我得到另一个异常：MissingServletRequestPartException。我编辑了最后一段源代码和问题的最后一段。交叉检查您的请求正文是否包含开发人员控制台网络选项卡中的图像数据。如果请求正文包含图像数据，请检查您的后端代码。

dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ab], {type: mimeString});
    return blob;

  }