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：获取数据：上传后的图像

1 个答案: