Javascript/React获取api通过formdata发送图像

Javascript/React获取api通过formdata发送图像,javascript,reactjs,fetch,Javascript,Reactjs,Fetch,我正在尝试使用javascript获取api以多部分/表单数据请求的形式发送一个文件对象(图像)。 下面的代码显示了如何将文件对象转换为字符串格式。 image参数是一个文件对象数组。我想将该数组的第一个映像发送到Web服务 onImageUpload = ((image) => { //File to arraybuffer let fr = new FileReader(); fr.onload = function(e) { var text = e.target.r

我正在尝试使用javascript获取api以多部分/表单数据请求的形式发送一个文件对象(图像)。 下面的代码显示了如何将文件对象转换为字符串格式。 image参数是一个文件对象数组。我想将该数组的第一个映像发送到Web服务

onImageUpload = ((image) => {
 //File to arraybuffer
 let fr = new FileReader();
  fr.onload = function(e) {
    var text = e.target.result;
    AccountService.uploadProfileImage(localStorage.getItem('session-key'), text)
  .then((ro) => {
    if(ro.code == 200) {
      this.showSnackbar("Profile image uploaded successfully!");
    }
    else {
      this.showSnackbar("Error uploading your image. Please try again later.");
    }
  })
}
 fr.readAsText(image[0]);
})
下面是我的uploadProfileImage函数,它使用FetchAPI发出post请求

static async uploadProfileImage(sessionKey, image) {
var reader  = new FileReader();
let ro = new ResponseObject();
let fd = new FormData();
let imgObj = new Image();
imgObj.src = image;
let blob = new Blob([new Uint8Array(image)], { type: "image/jpg"});
fd.append("name", localStorage.getItem('username'));
fd.append("file", blob);
return new Promise((resolve, reject) => {
  fetch(UrlConstants.BASE_URL + this.urlUploadProfileImage, {
    method: "POST",
    headers: {
      'Authorization': 'Bearer ' + sessionKey,
      "Content-type": "multipart/form-data;"
    },
    body: fd
  }).then((response) => {
    ro.code = response.status;
    return response.text();
  })
  .then((text) => {
    ro.message = text;
    resolve(ro);
  })
  .catch((ex) => {
    reject(ex);
  })
});
}
当我在uploadProfileImage中发送image参数而不将其转换为blob时,数据正在发送,但我需要blob在请求中具有内容类型:“image/jpg”,因为我正在使用的api无法处理没有它的请求。 请求中未包含图像的问题

我该怎么做? 谢谢你的帮助