Javascript/React获取api通过formdata发送图像
我正在尝试使用javascript获取api以多部分/表单数据请求的形式发送一个文件对象(图像)。 下面的代码显示了如何将文件对象转换为字符串格式。 image参数是一个文件对象数组。我想将该数组的第一个映像发送到Web服务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
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无法处理没有它的请求。
请求中未包含图像的问题
我该怎么做?
谢谢你的帮助