React.js Giriş türü dosyasıyla bir Görüntüyü Önizleme

Aug 19 2020

Şu anda bir görüntü dosyası yüklemesinde bir görüntüyü önizlemeye çalışıyorum. Görüntüyü ve konsol günlüğünü alabiliyorum ancak img etiketinde görüntüleyemiyorum.

İşte onları oluşturmaya çalıştığım yol:

<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" />
}

İşte benim durumum ve girdi için değişiklik yöntemim:

state = {
  imagePreview: {}
}

handleImageChange = async (e) => {
  console.log(e.target.files)
  await this.setState({ imagePreview: e.target.files })
  console.log(this.state.imagePreview)
}

İşte dosyalar için konsol günlüklerim: görüntü açıklamasını buraya girin

Yanıtlar

silencedogood Aug 19 2020 at 00:08

FileReaderBase64 verilerini almak ve görüntü etiketinin kaynağına uygulamak için bir nesne kullanmanız gerekir .

Ayrıca, bunun bir asyncişlev olmasına gerek görmüyorum (kısalık uğruna çalıştığınız bir sözü atlamadıysanız).

Sunduğunuz koddan, şunun gibi bir şey çalışmalıdır:

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 (veya jsx) şuna benzer:

<img src={this.state.imagePreview} alt="" className="image-preview" />