我认为 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 存储库而不是小提琴：https : //github.com/furqanZafar/reactjs-image-upload

根据经验，使用 ajax 上传文件在您使用时有效FormData，但是该文件必须是唯一的表单字段/数据。如果您尝试将其与其他数据（如用户名、密码或几乎任何其他数据）结合使用，则它不起作用。（可能有变通办法来解决这个问题，但我不知道任何）

如果您需要发送用户名/密码，您应该尽可能将它们作为标题发送。

我采取的另一种方法是首先使用普通数据进行用户注册，然后成功后我将带有 FormData 的文件作为更新单独上传。

react文件上传镜像组件：

  class ImageUpload extends React.Component {
    constructor(props) {
      super(props);
      this.state = {file: '',imagePreviewUrl: ''};
    }

  _handleSubmit(e) {
    e.preventDefault();
    // this.uploadImage()
    // TODO: do something with -> this.state.file
    console.log('handle uploading-', this.state.file);    }

   _handleImageChange(e) {
     e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(file)   }

       // XHR/Ajax file upload     uploadImage(imageFile) {
    return new Promise((resolve, reject) => {
      let imageFormData = new FormData();

      imageFormData.append('imageFile', imageFile);

      var xhr = new XMLHttpRequest();

      xhr.open('post', '/upload', true);

      xhr.onload = function () {
        if (this.status == 200) {
          resolve(this.response);
        } else {
          reject(this.statusText);
        }
      };

       xhr.send(imageFormData);

     });    }

  render() {
    let {imagePreviewUrl} = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} />);
    } else {
      $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
    }

    return (
      <div className="previewComponent">
        <form onSubmit={(e)=>this._handleSubmit(e)}>
          <input className="fileInput" type="file" onChange={(e)=>this._handleImageChange(e)} />
          <button className="submitButton" type="submit" onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
        </form>
        <div className="imgPreview">
          {$imagePreview}
        </div>
      </div>
    )   } }    React.render(<ImageUpload/>, document.getElementById("mainApp"));

服务器端图像保存和复制：

随着 express 你需要 npm install 'multiparty'。本示例使用多方来解析表单数据并提取图像文件信息。然后 'fs' 将临时上传的图像复制到更永久的位置。

let multiparty = require('multiparty');
let fs = require('fs');

function saveImage(req, res) {
  let form = new multiparty.Form();

  form.parse(req, (err, fields, files) => {

    let {path: tempPath, originalFilename} = files.imageFile[0];
    let newPath = "./images/" + originalFilename;

    fs.readFile(tempPath, (err, data) => {
      // make copy of image to new location
      fs.writeFile(newPath, data, (err) => {
        // delete temp image
        fs.unlink(tempPath, () => {
          res.send("File uploaded to: " + newPath);
        });
      }); 
    }); 
  })
}