使用 Postman 发送时文件未附加到 POST 请求 (axios)

Question

我试图理解为什么我的文件没有通过前端的 axios 请求发送，而我可以通过 Postman 发送它们。

我有带有 multer 的 Nodejs 后端来接受这样的文件，

app.use(multer({ storage: multer.memoryStorage() }).array('datafiles', 4))

在后端路由中我处理如下

export const postFarmData = async(req, res, next) => {

  console.log(req.files)

    for (const file of req.files) {
        const json = await csv().fromString(file.buffer.toString('utf-8'))
        for(const entry of json) {
            const validation = validateDataRow(entry)
            if(validation){
               await FarmDataModel.create(entry)
            }
        };
    }
    res.status(200).json({ success: true, msg: "Post new farm data"})
}

与 Postman 这些是 headers

这是body

在前端我 select 文件并发出类似 s0

的请求

const [uploadFile, setUploadFile] = useState()

const handleSubmit = async(e) => {
    e.preventDefault()
    const dataArray = new FormData();
    dataArray.append("datafiles", uploadFile);
    const response = await axios.post( API_ROOT,
        dataArray, {
            headers: {
                'Accept': '*/*',
                'Content-Type': 'multipart/form-data'
              }
    })
    const result = await response
    console.log(result)
}

return <div className="addfile-container">
    <form onSubmit={handleSubmit}>
        <label htmlFor="files">Select file(s)</label>
        <br/>
        <input type="file" id="files" name="files" multiple onChange={(e) => setUploadFile(e.target.files)}/>
        <br/>
        <input type="submit"></input>
    </form>
</div>

发生的情况是从前端发送响应正常，但 req.files 为空。所以没有文件到达后端。

使用 Postman 文件到达服务器并处理正常。我的前端文件没有到达后端是怎么回事？

编辑：添加 chrome 开发工具 Post 请求 headers

Answer 1

您的“文件”实际上是一个 FileList 因为您接受多个文件

你应该一一提取它们：

dataArray.append("datafiles", uploadFile);

应该是

// uploadFile is an HTML input element: <input type="file" id="myfileinput" multiple>

// loop through files
for (let i = 0; i < uploadFile.length; i++) {
    const file = uploadFile.item(i);
    dataArray.append("file" + i, file);
}

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/FileList

使用 Postman 发送时文件未附加到 POST 请求 (axios)

Files not being attached to POST request (axios) while sending with Postman works

http-post

node.js

postman

multer

axios