Question

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

Heres是我的组成部分

＆＃13;

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

＆＃13;

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

谢谢

Answer 1

这是代码：

var names = [];
var rules = {};

$('ol [type="checkbox"], ol [type="radio"]').each(function(i,el){
    var name = $(el).attr('name');
    if(names.indexOf(name) == -1){
        rules[name] = {
            required: true
        };
        names.push(name);
    }
});

$("#myform").validate({
    rules: rules
});

您将{this.state.files.preview ? <div> <img src={this.state.preview} /> </div> : null}更改为this.state.files.preview，您应该没问题。

希望这有帮助！

Answer 2

尝试

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>

React Image上传Dropzone

2 个答案: