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:
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>
)
}
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>
)
}
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.