16

这是 ReactJS 的新手。

谁能建议使用什么或如何在 React 中上传表单（带有几个输入框和一个文件选择器）？

尝试使用BlueImp JQuery-file-upload plugin一直在破坏我的神经。错误消息是神秘的，并且未能从谷歌获得任何有用的帮助。

我的代码如下：

<form id="myForm" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
  <input type="text" name="name">
  <input type="text" name="lastName">
  <input type="file" accept="image/*" name="myPic">
</form>

// Inside handleSubmit() of my component
$('#myForm").fileupload('add', {url: "myurl"});

谢谢！

4

5 回答 5

14

在 React 中使用 jQuery 插件是合理的，但是因为 React 保留了它自己的 DOM 虚拟表示，所以你应该避免使用 jQuery 选择器。

提交表单时，使用事件目标获取对真实 DOM 节点的引用，并将其包装在 jQuery 对象中以访问插件：

React.createClass({
  handleSubmit: function(event) {
    $(event.target).fileupload('add', {url: "myurl"});
  },
  render: function() {
    return (
      <form enctype="multipart/form-data" onSubmit={this.handleSubmit}>
        <input type="text" name="name" />
        <input type="text" name="lastName" />
        <input type="file" accept="image/*" name="myPic" />
      </form>
    );
  }
});
于 2014-03-05T16:42:41.263 回答
11

我尝试了 BlueImp 但放弃了，我正在使用从这里修改的解决方案来做到这一点：

/** @jsx React.DOM */

var FileForm = React.createClass({
    getInitialState: function() {
        return {data_uri: null}
    },
    handleSubmit: function() {
        $.ajax({
            url: url,
            type: "POST",
            data: this.state.data_uri,
            success: function(data) {
                // do stuff
            }.bind(this),
            error: function(xhr, status, err) {
                // do stuff
            }.bind(this)
        });
        return false;
    },
    handleFile: function(e) {
        var reader = new FileReader();
        var file = e.target.files[0];

        reader.onload = function(upload) {
            this.setState({
                data_uri: upload.target.result
            }, () => console.log(this.state.data_uri));

        }.bind(this);

        reader.readAsDataURL(file);
    },
    render: function() {
        return (
            <form onSubmit={this.handleSubmit} encType="multipart/form-data">
                <input type="file" onChange={this.handleFile} />
                <input type="submit" value="Submit />
            </form>

        );
    }
});

从那里您的端点应该能够处理它。

于 2014-07-29T18:33:36.653 回答
10

要将 BlueImp JQuery-file-upload 插件与 ReactJS 一起使用，您需要将replaceFileInput选项设置为 false。这是因为 whenreplaceFileInput为 true（默认值），每次选择一个新文件时，BlueImp 都会将文件输入元素替换为一个新元素……这是 ReactJS 不喜欢的。

从以下位置找到了相关信息： https ://groups.google.com/d/msg/reactjs/lXUpL22Q1J8/-ibTaq-OJ6cJ

请参阅replaceFileInput此处的文档： https ://github.com/blueimp/jQuery-File-Upload/wiki/Options#replacefileinput

于 2014-10-14T09:53:31.720 回答
3

这是我的方式没有 jQuery，使用 Parse.com

var UploadImageForm = React.createClass({
  getInitialState: function() {
    return {
      myFileName: "",
      myFileHandle: {}
    };
  },

  handleChange: function(event) {
    console.log("handleChange() fileName = " + event.target.files[0].name);
    console.log("handleChange() file handle = " + event.target.files[0]);
    this.setState( {myFileName: event.target.files[0].name} );
    this.setState( {myFileHandle: event.target.files[0]} );
  },

  handleSubmit: function(e) {
    e.preventDefault();
    console.log("INSIDE: handleSubmit()");
    console.log("fileName = " + this.state.myFileName); 
    console.log("this.state.myFileHandle = " + this.state.myFileHandle);

    if (this.state.myFileHandle) {
      console.log("INSIDE if test myFileHandle.length");
      var file = this.state.myFileHandle;
      var name = this.state.myFileName;
      var parseFile = new Parse.File(name, file);

      var myUser = new Parse.Object("TestObj");
      myUser.set("profilePicFile", parseFile);
      myUser.save()
        .then(function() {
          // The file has been saved to User.
          this.setState( {myFileHandle: null} );
          console.log("FILE SAVED to Object: Parse.com");
        }.bind(this), function(error) {
          // The file either could not be read, or could not be saved to Parse.
          console.log("ERROR: Parse.com " + error.code + " " + error.message);
        });;
    } // end if
  },

  render: function() {
      return  (
        <form onSubmit={this.handleSubmit}>
          <input type="file" onChange={this.handleChange} id="profilePhotoFileUpload" />
          <input type="submit" value="Post" />
        </form>
      );
  }
});
于 2014-09-05T23:18:12.867 回答
0

这是我的：

修改以处理多个文件或使用本机 XHR 而不是 jQuery 会很简单。

var FileUpload = React.createClass({
  handleFile: function(e) {
      var file = e.target.files[0];
      var formData = new FormData();
      formData.append('file',  file, file.name);
      $.ajax({
        url: URL,
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data) {
          console.log('success', data);
        },
        error: function() {
          console.error('error uploading file');
        },
      });
    },
    render: function() {
      return (
        <input className="btn btn-default btn-file" type="file" onChange={this.handleFile} accept="image/*;capture=camera"/>
      );
    }
});
于 2014-12-23T02:12:23.217 回答