javascript - 如何将文件从 ReactJS 上传到 Express 端点

Question

在我目前正在处理的应用程序中，有几个文件表单通过 superagent 提交到 Express API 端点。例如，图像数据是这样发布的:

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 从文件输入中设置如下:

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

最后，文件接收端点如下所示:

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 为空)。

我是不是漏掉了什么？将文件从 (ReactJS) Javascript 应用程序上传到 Express API 端点的最佳方法是什么？

Answer 1

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

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

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

因为这涉及到一个 nodejs 服务器脚本，所以我决定制作一个 GitHub 存储库而不是一个 fiddle :https://github.com/furqanZafar/reactjs-image-upload