我是新来的反应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'))
任何答案将不胜感激!
你可以利用 FileReader
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>