Отсутствует свойство предварительного просмотра react-dropzone

Перепробовал почти все, но не смог заставить это работать? Может ли кто-нибудь указать, что мне не хватает? Кроме того, я посмотрел на другой пост о переполнении стека, и у меня ничего не работает.

Не знаю, почему файл .preview отсутствует, но, похоже, он хорошо работает для других. Это из-за того, что используется компонентная модель? Должен ли я использовать функциональный компонент?

constructor() {
 super();
  this.onDrop = (files) => {
    console.log(files)
    this.setState({ files })
  };
  this.state = {
    files: []
  };
}

renderPreviewImg(files) {
  console.log(files)
  const img = {
    display: 'block',
    width: 'auto',
    height: '100%'
  };

  const thumb = {
    display: 'inline-flex',
    borderRadius: 2,
    border: '1px solid #eaeaea',
    marginBottom: 8,
    marginRight: 8,
    width: 100,
    height: 100,
    padding: 4,
    boxSizing: 'border-box'
  };

  const thumbInner = {
    display: 'flex',
    minWidth: 0,
    overflow: 'hidden'
  };

  const thumbs = files.map(file => (
    <div style={thumb} key={file.name}>
      <div style={thumbInner}>
        <img
          src={file.preview}
          style={img}
          alt="review"
        />
      </div>
    </div>
  ));
  return thumbs;
}

<Dropzone
  onDrop={this.onDrop}
>
  {({ getRootProps, getInputProps }) => (
    <section className="container">
      <div {...getRootProps({ className: 'dropzone' })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside style={thumbsContainer}>
        {this.renderPreviewImg(this.state.files)}
      </aside>
    </section>
  )}
</Dropzone>

Console.log файлов

Отсутствует изображение для предварительного просмотра


reactjs react-dropzone
person Harsha Murupudi    schedule 04.03.2020    source источник
comment
По умолчанию свойства предварительного просмотра нет, его необходимо создать.   -  person Deepankar Singh    schedule 04.03.2020

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете использовать этот метод

<img src={URL.createObjectURL(file[0])} />

Если у вас есть более одного файла, выполните цикл по файлам и верните приведенный выше оператор для каждого файла.

<Dropzone
  onDrop={this.onDrop}
>
  {({ getRootProps, getInputProps }) => (
    <section className="container">
      <div {...getRootProps({ className: 'dropzone' })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside style={thumbsContainer}>
        {this.state.files.map(file=>{
        return <img src={URL.createObjectURL(file[0])} />
        })}
      </aside>
    </section>
  )}
</Dropzone>
person amardeep saini    schedule 04.03.2020