[英]REACT DROPZONE: Get data:images after upload
As topic, I want get data:images
after upload. 作为主题,我想在上传后获取
data:images
。 I get that if only upload one image. 我只上传一张图片就可以了。 If multiple images how to array it in console?
如果多个图像如何在控制台中排列它?
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);
}
This is how I get single data:images
, but how about multiple images? 这就是我获取单个
data:images
,但是如何获取多个图像呢? Anyone has experience in this? 任何人都有经验吗?
To read multiple images: 要读取多个图像:
1. First define a function that will read a single file. 1.首先定义一个将读取单个文件的函数。
2. Use any loop to call that function for each entry of the array. 2.使用任何循环为数组的每个条目调用该函数。
3. Use array in state
variable to store the result, instead of a single variable. 3.在
state
变量中使用数组来存储结果,而不是单个变量。
constructor(props) {
super(props);
this.state = {
image: []
};
}
Use this function to read multiple files: 使用此功能可以读取多个文件:
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);
}
}
Check the answers of this question for details about [].forEach.call(mainImage, read)
. 检查此问题的答案以获取有关
[].forEach.call(mainImage, read)
详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.