关于node.js：使用Multer将获取的图像上传到Express


Uploading images with fetch to Express using Multer

我正在尝试将图像上传到Express服务器。我不确定如何执行此操作，但是这是我从MDN，express，react-dropzone和multer文档中获得的信息。 Multer似乎没有从react-dropzone拾取FormData对象，注销req.file时它返回未定义。

server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

1
2
3
4
5
6
7
8
    function uploadImage (image) {
      var formData = new FormData();
      formData.append('photo', image);
      fetch('http://localhost:8080/uploadUserImage/', {
        method:'POST',
         body: formData
      });
    }

当我发出此请求时，morgan注销以下内容：

{照片：'[目标文件]'} <---来自console.log(req.body');

未定义<---来自console.log(req.file);

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

发生错误是因为您明确指定了'Content-type'。要正确执行此操作，您还需要指定边界。您可以在以下位置找到multipart/form-data的详细说明：HTTP文件上传如何工作？

要解决文件上传问题，应从fetch请求中删除'Content-type'规范。您还可以重构uploadImage方法以上传表单而不解析输入：

1
2
3
4
5
6
7
8
9
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
  });
}

相关讨论

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

1
2
3
4
5
data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
});