使用Multer将图像上传到Express

我正在尝试将图像上传到Express服务器。 我不完全确定如何做到这一点,但是我从我能从MDN拿到的东西中得到了什么, expressreact-dropzone multer react-dropzonemulter文档。 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文件夹中?

       

网上收集的解决方案 "使用Multer将图像上传到Express"

发生错误是因为您明确指定了'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 }); }