Question

我正在尝试将图像上传到Express服务器。我不确定如何做到这一点，但是我从我从MDN，express，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]'}＆lt; ---来自console.log（req.body'）;

undefined＆lt; ---来自console.log（req.file）;

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

Answer 1

发生错误是因为您明确指定了'Content-type'。要正确执行此操作，您还需要指定边界。您可以在此处找到multipart/form-data的详细说明：How does HTTP file upload work?

要解决文件上传问题，您应该从'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
  });
}

Answer 2

对我来说，问题是Firebase出现错误，无法使用multer。您需要使用busboy并手动对其进行解析。我还需要从react native imagePicker而不是文件blob附加uri。像这样：

data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
});

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

server.js

client.js

2 个答案: