отсутствует свойство предварительного просмотра Reaction-Dropzone - PullRequest
Новая
       54

отсутствует свойство предварительного просмотра Reaction-Dropzone

0 голосов
/ 04 марта 2020

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

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

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 of files

Missing preview image

1 Ответ

0 голосов
/ 04 марта 2020

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

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

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

<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>
...