使用 fetch、FormData API 和 multer 發送文件：圖像不會上傳

Question

我嘗試在獲取正文中發送一些 FormData，以使用 multer (nodeJS) 上傳圖像。

我試圖設置一個 Header "Content-Type": "multipart/form-data"到我的 fetch 調用，但是當我這樣做時，我有一個 nodeJS 錯誤：

錯誤：多部分：未找到邊界

然后我嘗試刪除Content-Type header，所以瀏覽器默認設置它，並且獲取失敗，我什至沒有進入我的nodeJS路由器。

這是我的FormData准備方法：

 handleChange = event => { if(event.target.type === 'file') { const files = event.target.files; var formData = new FormData(); for(var i = 0; i < files.length; i++) { formData.append('images[]', files[i], files[i].name); } //UPLOAD IMAGE METHOD Image.upload(formData); } };

這是我的 fetch 調用：

 upload: async function(formData) { return fetch('http://localhost:8080/image/upload', { method: 'post', body: formData }) }

這是我的控制器：

 const express = require('express'); const router = express.Router(); const multer = require('multer'); const upload = multer({dest: __dirname + '/uploads/images'}); router.post('/upload', upload.array('images'), (req, res) => { console.log('req.file', req.file, req.files, req.body); return res.sendStatus(200); }); module.exports = router;

之前由app.use('/image', require('./controllers/imageController')); 所以訪問的 url 是http://localhost:8080/image/upload

沒有 Content-Type 的響應 header：

Provisional headers are shown
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryi3lc9wCsnhrvAOAB
Origin: http://localhost:3000
Referer: http://localhost:3000/backoffice/catalog/edit/5d976d6b50fd7f3d008d0f16
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
images[]: (binary)

內容類型錯誤：

錯誤：多部分：未找到邊界

謝謝大家的腦洞：）！

Answer 1

最后，我沒有看好地方：是我嘗試上傳的文件損壞了。 我嘗試了另一個，它工作得很好。