Question

不确定这样做的最佳做法是什么。我需要将二进制文件（比如Excel的.xlsx）发送到服务器而不加载页面。这就是我现在所拥有的

var SendToServer = React.createClass({
  render: function(){
    return (
      <form action="/upload" method="POST" encType="multipart/form-data">
        <input type="file" name="file"/>
        <input type="submit" value="Go!" />
      </form>
    )
  }
});

我可以抓住这个并在我的后端进一步处理它，这不是问题，但HTML页面将刷新，我不希望这样。所以我必须用AJAX做这个，我已经勾画了这样的东西

var SendToServer = React.createClass({
  submit: function(){
    $.ajax({
      type: 'POST',
      url: '/upload',
      data: {
        xlsx: ?
      }
      ...
    })
  }
  render: function(){
    return (
      <form action="/upload" method="POST" encType="multipart/form-data">
        <input type="file" name="file"/>
        <input type="button" onClick={this.submit} />
      </form>
    )
  }
});

在我的数据对象中定义什么？似乎我不能像我对“普通”输入字段那样只将onChange处理程序添加到我的上传输入中，尽管将它保存到React的状态。

Answer 1

您可以执行类似这样的操作，可以从事件处理程序访问该文件。您不一定需要将文件保存在组件的状态中。

var SendToServer = React.createClass({
  handleUpload: function(event) {
      var file = event.target.files[0];
      var formData = new FormData();
      formData.append('file',  file, file.name);

      $.ajax({
        url: "/upload",
        data: formData,
        type: 'POST',
        cache: false,
        processData: false,
        contentType: false,
        success: function(data) {
          console.log('Success!', data);
        },
        error: function() {
          console.error('Error uploading the file.');
        },
      });

    },
    render: function() {
      return (
        <input type="file" onChange={this.handleUpload} />
      );
    }
});

如何将二进制文件的字节保存到React状态？或者我如何使用AJAX与二进制文件？

1 个答案: