phản ứng js xử lý tệp tải lên

Question

Tôi mới phản ứng js. Tôi muốn tải lên hình ảnh không đồng bộ với phản ứng js Giả sử tôi có mã này

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')) 

Bất kỳ câu trả lời sẽ được đánh giá cao!

Answer 1

Bạn có thể tận dụng 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

Sử dụng sau mô-đun để chọn hình ảnh.
https://www.npmjs.com/package/react-image-uploader

Sau đó, bạn có thể tải hình ảnh lên máy chủ bằng cách sử dụng yêu cầu xhr. Sau đây là mã mẫu.

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

hơn Một dễ dàng hơn bằng cách nào, bằng cách sử dụng sử dụng mô-đun Axios nút Axios-FileUpload

npm install --save axios-fileupload 

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