为什么负载在上传文件时显示[object File]

Question

我正试图将一个文件发布到API中，我的文件显示在控制台，但在API有效负载中，它在上传时显示[目标文件]。

这是一个获取文件

的函数

handleFileChange = (e) => {
const files = e.target.files[0];
this.setState({ document: files });
console.log("Guru4666", this.state.document);
};

然后将状态推入一个名为award value的对象。

SubmitAward() {
var awardValue = {
title: this.state.awardTitle,
award_img: this.state.document,
};
console.log("awardValue", awardValue);
this.state.awarddata.push(awardValue);
}

然后调用API。

instructor_register() {
var titlearr = [];
var awardimgarr= [];
const UserToken = localStorage.getItem("UserToken");
this.state.awarddata.map((Data) => {
console.log("AwardDataa", Data);
titlearr.push(Data.title);
awardimgarr.push(Data.award_img);
});
const formdata = new FormData();
formdata.append("first_name",this.state.firstname)
formdata.append("instructor_award_name",titlearr)
formdata.append("instructor_award_img",awardimgarr)
axios({
method: "post",
url: `${API_AUTH_URL}instructor-register`,
data: formdata,
headers: { Authorization: "Bearer" + UserToken },
})
.then((response) => {
//this.setState({ modalVisibleLoader: false })
console.log("response.....", response.data);
}

有效载荷是

instructor_award_img: [object File]

Answer 1

您正在尝试向formdata对象追加一个数组。这不是一个受支持的数据类型，所以它被转换为字符串。

支持的数据类型是字符串和blob(文件是blob的一种类型)。

添加文件。

如果你想附加多个文件，通过循环遍历数组并依次附加每个文件来完成。