FileReader:result 属性
备注: 此特性在 Web Worker 中可用。
FileReader
接口的 result
只读属性返回文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪种方法来启动读取操作。
值
根据使用哪种读取方法来启动读取操作的适当的字符串或 ArrayBuffer
对象。如果读取尚未完成或不成功,则值为 null
。
结果类型如下所述。
方法 | 描述 |
---|---|
readAsArrayBuffer() |
result 属性是一个包含二进制数据的 JavaScript ArrayBuffer 对象。 |
readAsBinaryString() |
result 属性包含来自文件的字符串中的原始二进制数据。 |
readAsDataURL() |
result 属性是一个字符串,其中包含表示文件数据的 data: URL。 |
readAsText() |
result 属性是字符串中的文本。 |
示例
这个例子展示了一个函数 reader()
,它从文件输入框读取文件。它的工作原理是创建一个 FileReader
对象并为 load
事件创建一个侦听器,这样当读取文件时,result
被获取并传递给提供给 reader()
的回调函数。
内容作为原始文本数据进行处理。
js
// 给定这个 type="file" 的 HTMLInputElement:
// <input id="image" type="file" accept="image/*">
function reader(file, callback) {
const fr = new FileReader();
fr.onload = () => callback(null, fr.result);
fr.onerror = (err) => callback(err);
fr.readAsDataURL(file);
}
document.querySelector("#image").addEventListener("change", (evt) => {
// 没有文件,什么也不做。
if (!evt.target.files) {
return;
}
reader(evt.target.files[0], (err, res) => {
console.log(res); // Base64 `data:image/...` 字符串结果。
});
});
鉴于 FileReader
的异步性质,你可以使用基于 Promise 的方法。下面是一个文件输入框的示例,其 multiple
属性返回一个 Promise
。
js
// 给定这个 HTMLInputElement:
// <input id="images" type="file" accept="image/*" multiple>
const reader = (file) =>
new Promise((resolve, reject) => {
const fr = new FileReader();
fr.onload = () => resolve(fr);
fr.onerror = (err) => reject(err);
fr.readAsDataURL(file);
});
async function logImagesData(fileList) {
let fileResults = [];
const frPromises = fileList.map(reader);
try {
fileResults = await Promise.all(frPromises);
} catch (err) {
// 在这种特定情况下,Promise.all() 可能优于 Promise.allSettled(),因为将 FileList 修改为用户最初选择的文件的子集并非易事。因此,让我们隐藏整个操作。
console.error(err);
return;
}
fileResults.forEach((fr) => {
console.log(fr.result); // Base64 `data:image/...` 字符串结果。
});
}
// HTMLInputElement type="file" 事件处理器:
document.querySelector("#images").addEventListener("change", (evt) => {
// 没有文件,什么也不做。
if (!evt.target.files) {
return;
}
logImagesData([...evt.target.files]);
});
规范
Specification |
---|
File API # dom-filereader-result |
浏览器兼容性
BCD tables only load in the browser