使用Multer将图像上传到Express

我正在尝试将图像上传到Express服务器。 我不完全确定如何做到这一点，但是我从我能从MDN拿到的东西中得到了什么， express ， react-dropzone multer react-dropzone和multer文档。 Multer似乎没有从react-dropzone拿起FormData对象，注销req.file它返回undefined。

server.js

 var storage = multer.diskStorage({ destination: './public/users', filename: function (req, file, cb) { switch (file.mimetype) { case 'image/jpeg': ext = '.jpeg'; break; case 'image/png': ext = '.png'; break; } cb(null, file.originalname + ext); } }); var upload = multer({storage: storage}); app.use(upload.single('photo')); app.post('/uploadUserImage', function (req, res) { console.log(JSON.stringify(req.body.photo)) // form fields console.log(req.photo) // form files console.log(req.file) // form files res.send(req.body.photo); }); 

client.js

  function uploadImage (image) { var formData = new FormData(); formData.append('photo', image); fetch('http://localhost:8080/uploadUserImage/', { method:'POST', body: formData }); } 

当我提出这个请求时， morgan登出以下内容：

{photo：'[object File]'} <— from console.log（req.body'）;

未定义<— from console.log（req.file）;

multer创build文件夹public/uploads但不会将图像放在该位置。 如何获取照片，因为我需要通过锐利 （压缩文件大小和调整图像大小）运行它，然后将其放置在uploads文件夹中？

Answer 1

发生错误是因为您明确指定了'Content-type' 。 为了做到这一点，你还需要指定边界。 你可以在这里findmultipart/form-data的详细解释： HTTPfile upload是如何工作的？

要解决file upload的问题，您应该从fetch请求中删除'Content-Type'规范。 您还可以重构uploadImage方法来上传表单而不分析input：

 function uploadImage () { // This assumes the form's name is `myForm` var form = document.getElementById("myForm"); var formData = new FormData(form); fetch('http://localhost:8000/uploadUserImage', { method: 'POST', body: formData }); }