使用 fetch、FormData API 和 multer 发送文件：图片无法上传

Question

我尝试在 fetch body 中发送一些 FormData，以使用 multer (nodeJS) 上传图像。

我试图为我的获取调用设置一个 Header "Content-Type": "multipart/form-data"，但是当我这样做时，我遇到了一个 nodeJS 错误：

Error: Multipart: Boundary not found

然后我尝试删除 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);
    }

};

这是我的提取调用：

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

响应 header 无 Content-Type:

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)

错误 Content-Type:

Error: Multipart: Boundary not found

谢谢大家的脑洞:) !

Answer 1

最后没看好地方：是我尝试上传的文件损坏了。我试过另一个，效果很好。

使用 fetch、FormData API 和 multer 发送文件：图片无法上传

Send File with fetch, FormData API and multer : image won't upload

javascript

upload

multipartform-data

fetch

multer