如何将文件从ReactJS上传到Express端点 [英] How to upload files from ReactJS to Express endpoint

问题描述

在我目前正在处理的应用程序中，有几个文件表单通过 superagent 提交给Express API端点。例如，图像数据的发布方式如下：

In the application I'm currently working on, there are a couple of file forms that are submitted via superagent to an Express API endpoint. For example, image data is posted like so:

handleSubmit: function(evt) {
    var imageData = new FormData();

    if ( this.state.image ) {
       imageData.append('image', this.state.image);
       AwsAPI.uploadImage(imageData, 'user', user.id).then(function(uploadedImage) {
         console.log('image uploaded:', uploadedImage);
       }).catch(function(err) {
         this.setState({ error: err });
       }.bind(this));
     }
}

和 this.state。 image 在文件输入中设置如下：

and this.state.image is set like this from a file input:

updateImage: function(evt) {
    this.setState({
      image: evt.target.files[0]
    }, function() {
      console.log('image:', this.state.image);
    });
  },

AWSAPI.uploadImage 看起来像这样：

uploadImage: function(imageData, type, id) {
    var deferred = when.defer();

    request.put(APIUtils.API_ROOT + 'upload/' + type + '/' + id)
    .type('form')
    .send(imageData)
    .end(function(res) {
      if ( !res.ok ) {
        deferred.reject(res.text);
      } else {
        deferred.resolve(APIUtils.normalizeResponse(res));
      }
    });

    return deferred.promise;
  }

最后，文件接收端点看起来像这个：

And lastly, the file receiving endpoint looks like this:

exports.upload = function(req, res) {

  req.pipe(req.busboy);

  req.busboy.on('file', function(fieldname, file) {
    console.log('file:', fieldname, file);
    res.status(200).send('Got a file!');
  });

};

目前，接收端点的 on（'file'）函数永远不会被调用，所以没有任何反应。以前，我尝试使用multer而不是Busboy的类似方法，但没有成功（ req.body 包含已解码的图像文件， req.files 是空的。

Currently, the receiving endpoint's on('file') function never gets called and so nothing happens. Previously, I've tried similar approaches with multer instead of Busboy with no more success (req.body contained the decoded image file, req.files was empty).

我在这里遗漏了什么吗？将文件从（ReactJS）Javascript应用程序上传到Express API端点的最佳方法是什么？

Am I missing something here? What is the best approach to upload files from a (ReactJS) Javascript app to an Express API endpoint?

推荐答案

我认为superAgent是设置错误的内容类型 application / x-form-www-encoded 而不是 multipart / form-data 你可以通过使用附加方法解决这个问题：

I think superAgent is setting the wrong content-type of application/x-form-www-encoded instead of multipart/form-data you can fix this by using the attach method like so:

request.put(APIUtils.API_ROOT + 'upload/' + type + '/' + id)
    .attach("image-file", this.state.image, this.state.image.name)
    .end(function(res){
        console.log(res);
    });

有关attach方法的更多信息，请阅读此处的文档： http://visionmedia.github.io/superagent/#multipart-requests

for more information about the attach method, read the documentation here: http://visionmedia.github.io/superagent/#multipart-requests

因为这涉及一个nodejs服务器脚本我决定制作一个GitHub仓库而不是一个小提琴： https://github.com/furqanZafar/reactjs-image-upload

since this involves a nodejs server script I decided to make a GitHub repo instead of a fiddle: https://github.com/furqanZafar/reactjs-image-upload

这篇关于如何将文件从ReactJS上传到Express端点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！