这是我的代码:
它会读取上传的文件并将原始文件保存在数据对象(propertiesData)中。 问题出现在这一部分:
var fr = new FileReader();
var readFiles;
var fileI;
var files;
fr.onload = () => {
readFiles.push(fr.result);
fileI ++;
if (fileI < files.length) {
fr.readAsDataURL(files[fileI]);
}
};
function getVideoImage(path, secs, callback) {
var me = this, video = document.createElement('video');
video.onloadedmetadata = function() {
if ('function' === typeof secs) {
secs = secs(this.duration);
}
this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
};
video.onseeked = function(e) {
var canvas = document.createElement('canvas');
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = canvas.toDataURL();
callback.call(me, img, this.currentTime, e);
};
video.onerror = function(e) {
callback.call(me, undefined, undefined, e);
};
video.src = path;
}
$uploadFiles.on("input", () => {
files = $uploadFiles[0].files;
var value = $uploadFiles[0].value;
fileI = 0;
readFiles = [];
fr.readAsDataURL(files[0]);
for (var i = 0; i < files.length; i++) {
var format = files[i].name.split(".").pop().toUpperCase();
var thumbnail;
getVideoImage(readFiles[i], 0, (img) => {
thumbnail = img;
});
if (fileFormat.video.includes(format)) {
propertiesData.FILES.contents[0].push({
thumbnail: thumbnail,
title: files[i].name,
file: readFiles[i]
});
} else if (fileFormat.image.includes(format)) {
console.log(readFiles);
console.log(i);
console.log(readFiles[i])
propertiesData.FILES.contents[1].push({
thumbnail: readFiles[i],
title: files[i].name,
file: readFiles[i]
});
} else if (fileFormat.audio.includes(format)) {
propertiesData.FILES.contents[2].push({
thumbnail: "Assets/Logo.PNG",
title: files[i].name,
file: readFiles[i]
});
} else {
alert("File Format Not Supported");
}
$("#properties-left-menu li[style='color: ${color[1]}']")
}
});
它会读取上传的文件并将原始文件保存在数据对象(propertiesData)中。 问题出现在这一部分:
console.log(readFiles);
console.log(i);
console.log(readFiles[i])
propertiesData.FILES.contents[1].push({
thumbnail: readFiles[i],
title: files[i].name,
file: readFiles[i]
});
console.log(readFiles); 显示原始文件的数组,类似于这个,而 console.log(i); 显示正确的索引,所以 console.log(readFiles[i]); 应该显示其中一个原始文件字符串,但实际上它只显示 undefined。为什么呢?
console.log(i)
输出什么?FileReader
的onload
事件是异步的,for
循环是同步的,除非使用async/await
。 - guest271314console.log(i)
输出正确的索引(0、1、2、3...) - Sprout - TupleFileReader
的onload
处理程序中,if (fileI < files.length) {fr.readAsDataURL(files[fileI]);}
的目的是什么?是否设置了multiple
属性?为什么在下一行是一个for
循环迭代files
FileList
对象时执行fr.readAsDataURL(files[0])
? - guest271314