web-dev-qa-db-fra.com

Obtenir un aperçu de l'image avant de télécharger dans React

Beaucoup d'exemples de ceci sur ici mais ne semblent pas pouvoir en trouver pour réagir. J'ai réussi à convertir le Vanilla JS pour réagir mais en obtenant une erreur .

La réponse a l'air assez simple alors là je vais réagir:

getInitialState: function(){
  return{file: []}
},

_onChange: function(){
  // Assuming only image
  var file = this.refs.file.files[0];
  var reader = new FileReader();
  var url = reader.readAsDataURL(file);
  console.log(url) // Would see a path?
  // TODO: concat files for setState
},

render: function(){
 return(
  <div>
    <form>
      <input 
        ref="file" 
        type="file" 
        name="user[image]" 
        multiple="true"
        onChange={this._onChange}/>
     </form>
    {/* Only show first image, for now. */}
    <img src={this.state.file[0} />
  </div>
 )
};

En gros, toutes les réponses que j'ai vues montrent quelque chose comme ce que j'ai. Une différence dans l'application React?

En ce qui concerne la réponse:

enter image description here

javascriptjqueryreactjs
11
Sylar

Aucune différence, il suffit de lire votre image lorsque l'événement load se termine. Dans le gestionnaire d'événements load end, indiquez simplement votre état:

getInitialState: function(){
  return{file: []}
}

_onChange: function(){
  // Assuming only image
  var file = this.refs.file.files[0];
  var reader = new FileReader();
  var url = reader.readAsDataURL(file);

   reader.onloadend = function (e) {
      this.setState({
          imgSrc: [reader.result];
      })
    }.bind(this);
  console.log(url) // Would see a path?
  // TODO: concat files
},

render: function(){
 return(
  <div>
    <form>
      <input 
        ref="file" 
        type="file" 
        name="user[image]" 
        multiple="true"
        onChange={this_onChange}/>
     </form>
    {/* Only show first image, for now. */}
    <img src={this.state.imgSrc} />
  </div>
 )
}
17
Piyush.kapoor

Voici une solution simple et fonctionnelle qui affiche toutes les images sélectionnées

getInitialState: function(){
  return{file: []}
}

_onChange: (event)=>{
    this.setState({
        imgs: event.target.files
    })
},

render: function(){
 return(
  <div>
    <form>
      <input 
        ref="file" 
        type="file" 
        name="user[image]" 
        multiple="true"
        onChange={this._onChange}/>
    </form>
    {/* Display all selected images. */}
    <img src={this.state.imgSrc} />

    {this.state.imgs && [...this.state.imgs].map((file)=>(
       <img src={URL.createObjectURL(file)} />
    ))}

  </div>
 )
}
2
Nkemtakeh Celsoppe

Il y a ma solution. Très simple et facile à utiliser.

JSX 

<form onSubmit={this.onSubmit} >      
      <input
         ref="uploadImg"
         type="file"
         name="selectedFile"
         onChange={this._onChange}
        />
</form>

<img src={this.state.imageUrl} />

Et fonction

  _onChange = (e) => {

    const file    = this.refs.uploadImg.files[0]
    const reader  = new FileReader();

    reader.onloadend = () => {
        this.setState({
            imageUrl: reader.result
        })
    }
    if (file) {
        reader.readAsDataURL(file);
        this.setState({
            imageUrl :reader.result
        })
    } 
    else {
        this.setState({
            imageUrl: ""
        })
    }
}

Et bien sûr, vous devez avoir l'état imageUrl qui est notre src dans jsx.

0
Skylin R