web-dev-qa-db-ja.com

BlueImp FileUploadjQueryプラグインを介してReactJSを使用してファイルをアップロードする

これは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"});

ありがとう！

jqueryjquery-file-uploadreactjs
16
5122014009

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>
    );
  }
});
14
Ross Allen

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>

        );
    }
});

そこから、エンドポイントがそれを処理できるはずです。

11
Bovard

ReactJSでBlueImpJQuery-file-uploadプラグインを使用するには、replaceFileInputオプションをfalseに設定する必要があります。これは、replaceFileInputがtrue（デフォルト）の場合、BlueImpは、新しいファイルが選択されるたびにファイル入力要素を新しい要素に置き換えるためです。これは、ReactJSが好まないことです。

これについては、次のサイトから確認してください： https://groups.google.com/d/msg/reactjs/lXUpL22Q1J8/-ibTaq-OJ6cJ

ここでreplaceFileInputのドキュメントを参照してください： https://github.com/blueimp/jQuery-File-Upload/wiki/Options#replacefileinput

10
Chanon

Parse.comを使用して、jQueryを使用しない方法を説明します。

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>
      );
  }
});
3
Giant Elk

これが私のものです：

複数のファイルを処理するように変更したり、jQueryの代わりにネイティブXHRを使用したりするのは簡単です。

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"/>
      );
    }
});
0
Bryan Larsen