Reakcja na przesyłanie pliku js

Question

Jestem nowy, aby zareagować js. Chcę przesłać zdjęcie asynchronicznie z reagują js Załóżmy, że mam ten kod

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

Każda odpowiedź będzie mile widziana!

Answer 1

Można skorzystać z 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

używać następujących modułów, aby wybrać zdjęcia.
https://www.npmjs.com/package/react-image-uploader

Następnie można przesłać obraz na serwer za pomocą żądania xhr. Poniżej znajduje się przykładowy kod.

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

Jeszcze łatwiejszy sposób, przy użyciu przy użyciu modułów węzeł Axios Axios-FileUpload

npm install --save axios-fileupload 

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