React Image上传Dropzone-Java 学习之路

我有点麻烦 . 我正在使用react编写图像上传器，我创建了一个上传组件，我希望在将其发送到后端并将其上传到cdn之前显示预览图像 . 但是，我无法从州获得预览 . 没有错误，它似乎没有从州获得预览道具 . 很想知道你的意见 .

赫雷斯是我的组成部分

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

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

谢谢

2 回答

0
这是一段代码：
```
{this.state.files.preview ? <div>
  <img src={this.state.preview} />
</div> : null}
```
您将 this.state.files.preview 更改为 this.state.preview ，您应该没问题 .

希望这可以帮助！
回复于 2024-05-02T16:12:55+08:00

尝试

files.length == 0?
<Dropzone onDrop={this.onDrop.bind(this)}>
<p>Try dropping some files here, or click to select files to upload.
</p>
</Dropzone>
:<div>{files.map(f => <img src={f.preview} />)}</div>

回复于 2024-05-02T16:12:55+08:00

React Image上传Dropzone

2 回答

相关问题