使用Multer将图像上传到Express上传

Question

我正在尝试将图像上传到Express服务器.我并不完全确定如何做到这一点,但继承人什么我已经从我已经能够从MDN,拿起了express,react-dropzone和multer文档.react-dropzone当注销时req.file,Multer似乎没有从中获取FormData对象返回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]'} <---来自console.log(req.body');

undefined <---来自console.log(req.file);

multer创建文件夹public/uploads但不将图像放在该位置.如何获取照片,因为我需要通过锐利(压缩文件大小并调整图像大小)然后将其放在uploads文件夹中？

Answer 1

发生错误是因为您'Content-type'明确指定了.要正确执行此操作,您还需要指定边界.您可以在multipart/form-data此处找到详细说明:HTTP文件上载如何工作？

要解决文件上载的问题,您应该'Content-Type'从fetch请求中删除规范.您还可以重构uploadImage方法以上载表单而无需解析输入:

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
  });
}