将文件从React上传到Express使用axios.post方法无法正常工作。

huangapple go评论65阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年5月18日 01:45:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76274872.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定