Question

我尝试使用javascript fetch api将文件对象（图像）作为multipart / form-data请求发送。下面的代码显示了如何将文件对象转换为字符串格式。 image参数是File对象的数组。我想将该数组的第一个图像发送到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函数，它使用fetch api发出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具有Content-Type：＆＃34; image / jpg＆＃34;在请求中作为api我正在处理没有它的请求。图像未包含在请求中的问题。

我该怎么做？谢谢你的帮助。

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

0 个答案: