如何使用React.js和axios发送POST响应到另一个函数?

Question

我有fileUploadHandler函数如下POST文件。post的响应看起来像:{ filename: '123sdfg.xlsx' }

fileUploadHandler = (fileData) => {
const formData1 = new FormData();
formData1.append("file", fileData)
postFileUpload(formData1).then((result) => console.log("response", result.data));    
};

我尝试下面的代码，但抛出错误，storeFile未定义。

fileUploadHandler = (fileData) => {
const formData1 = new FormData();
formData1.append("file", fileData)
postFileUpload(formData1).then((result) => storeFile(result.data)); 
storeFile;
};

post call函数如下:

export const postFileUpload = (values) => {
return new Promise((resolve, reject) => {
axios    
.post('<URL>', values)
.then((result) => {
if (result) {
resolve(result);
}
})
.catch((error) => {
reject({ message: "Error:" + error.message });
});
});
}

我想处理程序不仅张贴文件，但得到响应，并将响应发送到另一个函数。如何从fileUploadHandler返回响应到另一个函数，如formSubmit(一个例子)。

Answer 1

我想这可能是你正在寻找的。如果希望使用axios发送文件，可能还需要添加指定内容类型的头文件。

const fileUploadHandler = fileData => {
const formData1 = new FormData()
formData1.append("file", fileData)
axios
.post("<URL>", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(result => {
if (result) {
postFileUpload(result)
}
})
.catch(error => {
// Handle any errors if the upload fails
console.log(error)
})
}
const postFileUpload = result => {
// This will be called after the file is uploaded.
console.log(result)
}

编辑:

const postFileUpload = formData => {
return axios.post("<URL>", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
}
const fileUploadHandler = fileData => {
const formData1 = new FormData()
formData1.append("file", fileData)
postFileUpload(formData1)
.then(result => {
console.log("response", result.data)
})
.catch(error => {
// Handle any errors if the upload fails
console.log(error)
})
}