javascript - React 图片上传 Dropzone

Question

我遇到了一点麻烦。我正在使用 React 编写一个图像 uploader ，我创建了一个上传组件，我希望在将其发送到后端并将其上传到 CDN 之前显示预览图像。但是，我无法设法从状态中获取预览。没有错误，它只是似乎没有从状态中获取预览 Prop 。很想知道您的意见。

这是我的组件

import React, { PropTypes } from 'react'
var Dropzone = require('react-dropzone');
import './uploader.scss'

class Uploader extends React.Component {
    
    constructor(props){
      super(props)
      this.state = {
        files: []
      };
    }

    onDrop(files) {
      console.log(files);
      let filename = files[0].name;
      let preview = files[0].preview;
      this.setState({
        files: files,
        name: filename,
        preview: preview

      });
    }
      

    render() {
      return (
          <div className = 'dropzoneContainer' >
            <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop} className= 'zone' multiple={false}>
              <div className = 'dropzone' >Upload Image</div>
              {this.state.files.preview ? <div>
                <img src={this.state.preview} />
              </div> : null}
            </Dropzone>
          </div>
      );
    }
}

export default Uploader

我正在使用这个 react 拖放库 http://okonet.ru/react-dropzone/

谢谢

Answer 1

就是这段代码:

{this.state.files.preview ? <div>
  <img src={this.state.preview} />
</div> : null}

将 this.state.files.preview 更改为 this.state.preview 应该没问题。

希望这有帮助!