反应js处理文件上传

Question

我是新的反应js。我想与反应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')) 

任何答案将不胜感激！

Answer 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>

Answer 2

使用下面的模块选择图像。
https://www.npmjs.com/package/react-image-uploader

然后，您可以使用xhr请求将图像上传到服务器。以下是示例代码。

var xhr = new XMLHttpRequest(); 
xhr.onload = function (e) { 
//your success code goes here 
} 
var formData = new FormData(); 
xhr.open("POST", url, true); 
formData.append('file', fileData); 
xhr.send(formData); 

Answer 3

import axios from 'axios'; 
var FormBox = React.createClass({ 
    getInitialState: function() { 
    return { 
     photo: [], 
     name : '', 
     documents:[] 
    } 
    }, 
    pressButton: function() { 
    var component = this 
    var data = new FormData(); 
    data.append("photo", component.state.photo, component.state.name); 
    var request = axios.post('http://localhost:3000/document', data) 
     request.then(function(response){ 
    // you need to send data from server in response 
      if(response.status == 200){ 
      console.log('saved in db') 
      component.state.documents.push(response.data.documents) 
      // pushed document data in documents array 
      } 
     }) 


    }, 
    getPhoto: function() { 
    var uploadfile = document.getElementById(upload_doc).files[0] 
    this.setState({ 
     photo: uploadfile, name : uploadfile.name 
    }) 
    }, 
    render: function() { 
    var documents = this.state.documents.map((doc)=>{ 
     return <div> 
       <a href={doc.url}>{doc.name}</a> 
       <img src={doc.photo} /> 
       </div> 
    }) 
    // you can show your documents uploaded this way using map function 
    return (
     <form action='.' enctype="multipart/form-data"> 
     <input type='file' id='upload_doc' onChange={this.getPhoto}/> 
     <button onClick={this.pressButton}> Get it </button> 
     <span>{documents}</span> 
     // this way you can see uploaded documents 
     </form> 
    ) 
    } 
}) 

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

Answer 4

一个更简单的方法，通过使用爱可信节点模块采用爱可信 - 文件上传

npm install --save axios-fileupload 

const axiosFileupload = require('axios-fileupload'); 
axiosFileupload(url,file);