React.js Meninjau Gambar dengan file tipe input
Saat ini saya mencoba melihat pratinjau gambar pada unggahan file gambar. Saya dapat menerima gambar, dan log konsol, namun saya tidak dapat menampilkannya di tag img.
Inilah cara saya mencoba membuatnya:
<input type='file' id="uploadImage" onChange={this.handleImageChange} className="upload-input" />
<label htmlFor="uploadImage" className="upload-image-button">Choose An Image</label>
{this.state.imagePreview[0] ?
<img src={this.state.imagePreview[0]} alt="" className="image-preview" />
:
<img alt="" className="image-preview" />
}
Berikut adalah status saya dan pegangan saya pada metode perubahan untuk input:
state = {
imagePreview: {}
}
handleImageChange = async (e) => {
console.log(e.target.files)
await this.setState({ imagePreview: e.target.files })
console.log(this.state.imagePreview)
}
Berikut adalah log konsol saya untuk file: masukkan deskripsi gambar di sini
Jawaban
Anda harus menggunakan sebuah FileReader
objek, untuk mendapatkan data base64 dan menerapkannya ke sumber tag gambar.
Juga, saya tidak melihat kebutuhan untuk ini menjadi sebuah async
fungsi (kecuali, demi singkatnya, Anda meninggalkan janji yang sedang Anda kerjakan).
Dari kode yang Anda berikan, sesuatu seperti ini seharusnya berfungsi:
handleImageChange(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
// The file's text will be printed here, if you want to see the base64
console.log(event.target.result)
// Set state with base64 data
this.setState({ imagePreview: e.target.result })
};
reader.readAsText(file);
}
Html (atau jsx) akan terlihat seperti ini:
<img src={this.state.imagePreview} alt="" className="image-preview" />