反应js处理文件上传

小编典典

反应js处理文件上传

reactjs

我是新来的反应js。我想用react js异步上传图像假设我有这段代码

var FormBox = React.createClass({
  getInitialState: function () {
    return {
      photo: []
    }
  },
  pressButton: function () {
    var data = new FormData();
    data.append("photo", this.state.photo);
    // is this the correct way to get file data?
  },
  getPhoto: function (e) {
    this.setState({
      photo: e.target.files[0]
    })
  },
  render: function () {
    return (
      <form action='.' enctype="multipart/form-data">
        <input type='file'  onChange={this.getPhoto}/>
        <button onClick={this.pressButton}> Get it </button>
      </form>
    )
  }
})

ReactDOM.render(<FormBox />, document.getElementById('root'))

任何答案将不胜感激！

阅读 254

2020-07-22

共1个答案

小编典典

你可以利用 FileReader

var FormBox = React.createClass({

          getInitialState: function () {

            return {

              file: '',

              imagePreviewUrl: ''

            }

          },

          pressButton: function () {

            e.preventDefault();

          // TODO: do something with -> this.state.file

          console.log('handle uploading-', this.state.file);

          },

          getPhoto: function (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);



          },

          render: function () {

            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>

              <form action='.' enctype="multipart/form-data">

                <input type='file'  onChange={this.getPhoto}/>

                <button onClick={this.pressButton}> Get it </button>

              </form>

              <div className="imgPreview">

                {imagePreview}

              </div>

              </div>

            )

          }

        })



        ReactDOM.render(<FormBox />, document.getElementById('root'))


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>

<div id="root"></div>

2020-07-22