Как просмотреть загруженный файл изображения из файла ввода с Reactjs? - PullRequest
Новая
       7

Как просмотреть загруженный файл изображения из файла ввода с Reactjs?

0 голосов
/ 05 октября 2018

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

, поэтому я сделал это 

  <Dropzone
      onDrop={this.handleDropChange}}>
      <p>
        Try dropping some files here, or click to select files to upload.
      </p>
    </Dropzone>



 @observable files = [];
  @action
  handleDropChange = (files) => {

    files.forEach(file => {
        this.loadFile(file);
    });
}

  @action
  loadFile(file){
    const reader = new FileReader();
    reader.addEventListener('load',() => {
        runInAction(() => {
            this.files.push({file: file, preview: reader.result,  uploaded: false})
            window.URL.revokeObjectURL(reader.result);
          });
      },false);

    // reader.readAsDataURL(file.fileObject);
  }

      <img src={this.props.preview} />

Проблема в том,хотя, когда я перетаскиваю, скажем, 500 изображений, им требуется некоторое время для рендеринга на экране.Я думаю, что с реактивом трудные времена, так как он по сути повторяет рендеринг 500 раз, так как каждая «загрузка считывателя файлов» приводит к тому, что новый элемент помещается в массив файлов.

Есть ли возможность пакетировать этот или первый?сделать всю загрузку потом заново сделать?

1 Ответ

0 голосов
/ 06 октября 2018

revokeObjectURL предназначен для URL объекта и не предназначен для других строк | urls | base64.
Вы можете создать objectURL, вызвав URL.createObjectURL, например так: 

var url = URL.createObjectURL(file || blob)
var image = new Image()
image.src = url
document.body.appendChild(image)

Нет необходимостииспользовать FileReader и читать весь контент, кодировать его как base64, а затем позволить браузеру декодировать его обратно в двоичный файл.это пустая трата ресурсов ...

отмена objecturl должна быть сделана, когда вам больше не нужен url

...