使用 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 这些是标题

这是身体

在前端我 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 devtools 发布请求标头

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