英文:
Uploading a file from React to Express with axios.post isn't working
问题
I feel that I'm missing something tiny, for some reason this just isn't working. I'm trying to do an axios.post from React. I want to pass multiple values, including a pdf file. Console.log confirms that the full file is being sent from the React side. But when it gets to the Express side, only the file.path has been received and not the whole file.
React side:
var file = newFileList[i];
var content = newCreateList[i]
axios
.post(`/upload`, {file, content})
.then(response => {
// response stuff
})
if I do a console log on newFileList[i], it displays as a File object like it is supposed to
Express side:
const upload = async (body) => {
try {
console.log("BODY: ", body);
console.log displays:
BODY: {
file: { path: 'testFile.pdf' },
content: {
id: 0,
name: 'name',
language: 'language',
}
}
So, the file is no longer a File object, now it's just the file path.
I have also tried this on the React side instead, as it seems that this is what is recommended:
let formData = new FormData();
formData.append('file', newFileList[i]);
formData.append('info', newCreateList[i]);
axios
.post(`/upload`, formData)
.then(response => {
// response stuff
})
Then the console log on the Express side, just displays this:
BODY: { info: '[object Object]' }
英文:
I feel that I'm missing something tiny, for some reason this just isn't working. I'm trying to do an axios.post from React. I want to pass multiple values, including a pdf file. Console.log confirms that the full file is being sent from the React side. But when it gets to the Express side, only the file.path has been received and not the whole file.
React side:
var file = newFileList[i];
var content = newCreateList[i]
axios
.post(`/upload`, {file, content})
.then(response => {
// response stuff
})
if I do a console log on newFileList[i], it displays as a File object like it is supposed to
Express side:
const upload = async (body) => {
try {
console.log("BODY: ", body);
console.log displays:`
BODY: {
file: { path: 'testFile.pdf' },
content: {
id: 0,
name: 'name',
language: 'language',
}
}
So, the file is no longer a File object, now it's just the file path.
I have also tried this on the React side instead, as it seems that this is what is recommended:
let formData = new FormData();
formData.append('file', newFileList[i]);
formData.append('info', newCreateList[i]);
axios
.post(`/upload`, formData)
.then(response => {
// response stuff
})
Then the console log on the Express side, just displays this:
BODY: { info: '[object Object]' }
答案1
得分: 1
你需要添加一个类似这样的头部配置:
axios
.post(`/upload`, formData,{
headers:{
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
// response stuff
})
在控制台中,你将只看到图像或文件的元数据或以Base64编码的数据,而不会看到实际的图像或文件。
英文:
You have to add a header configuration like this:
axios
.post(`/upload`, formData,{
headers:{
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
// response stuff
})
In the console younever will see the img or file just the metadata o the data in 64Base code
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论