React.js Предварительный просмотр изображения с файлом входного типа

Question

В настоящее время я пытаюсь предварительно просмотреть изображение при загрузке файла изображения. Я могу получить изображение и журнал консоли, но не могу отобразить его в теге img.

Вот как я их пытаюсь отобразить:

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

Вот мое состояние и мой способ изменения метода ввода:

state = {
  imagePreview: {}
}

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

Вот мои журналы консоли для файлов: введите здесь описание изображения

Answer 1

Вам нужно будет использовать FileReaderобъект, чтобы получить данные base64 и применить их к источнику тега изображения.

Кроме того, я не вижу необходимости в том, чтобы это была asyncфункция (если, для краткости, вы не пропустили обещание, с которым работаете).

Из представленного вами кода должно работать примерно следующее:

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 (или jsx) будет выглядеть примерно так:

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