使用 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