React.js Meninjau Gambar dengan file tipe input

Aug 19 2020

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

silencedogood Aug 19 2020 at 00:08

Anda harus menggunakan sebuah FileReaderobjek, untuk mendapatkan data base64 dan menerapkannya ke sumber tag gambar.

Juga, saya tidak melihat kebutuhan untuk ini menjadi sebuah asyncfungsi (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" />