REACT DROPZONE：上传后获取 data:images

Question

作为主题，我想在上传后得到data:images。如果只上传一张图片，我就明白了。如果多个图像如何在控制台中排列它？

constructor(props) {
  super(props);
  this.state = {
    image: null
  };
}

onDropMain(mainImage) {
    var that = this
    let reader = new FileReader()
    reader.readAsDataURL(mainImage[0])
    reader.onloadend = function() {
        var result = reader.result
        that.setState({
            mainImage: result
        });
    }
    console.log(reader);
}

这就是我获得单张图片的方式 data:images，但是多张图片呢？有人有这方面的经验吗？

Answer 1

读取多张图片：

1.首先定义一个读取单个文件的函数。

2. 使用任何循环为数组的每个条目调用该函数。

3.在state变量中使用数组存储结果，而不是单个变量。

constructor(props) {
  super(props);
  this.state = {
    image: []
  };
}

使用此功能读取多个文件：

onDropMain(mainImage) {
    var that = this;

    function read(file){
        let Reader = new FileReader();
        Reader.onload = function (event) {
            let image = that.state.image.slice();
            image.push(event.target.result);
            that.setState({image}, () => console.log(image));
        };
        Reader.readAsDataURL(file);
    }

    if (mainImage && mainImage.length) {
        [].forEach.call(mainImage, read);
    }    
}

查看 answers of this question 了解有关 [].forEach.call(mainImage, read) 的详细信息。

REACT DROPZONE：上传后获取 data:images

REACT DROPZONE: Get data:images after upload

javascript

dropzone.js

reactjs