FileReader：result 属性
注意：此功能在 Web Workers 中可用。
FileReader 接口的只读属性 result 返回文件的内容。此属性仅在读取操作完成后才有效，数据格式取决于用于启动读取操作的方法。
值
根据用于启动读取操作的读取方法，返回一个合适的字符串或 ArrayBuffer。如果读取尚未完成或不成功，则值为 null。
结果类型描述如下。
| 方法 | 描述 |
|---|---|
readAsArrayBuffer()
|
result 是一个包含二进制数据的 JavaScript ArrayBuffer。 |
readAsBinaryString()
|
result 在字符串中包含来自文件的原始二进制数据。 |
readAsDataURL()
|
result 是一个包含表示文件数据的 data: URL 的字符串。 |
readAsText()
|
result 是字符串形式的文本。 |
示例
此示例演示了一个函数 reader()，该函数从 文件输入中读取文件。它通过创建一个 FileReader 对象并创建一个 load 事件的监听器来实现，以便在文件读取完成后，获取 result 并将其传递给提供给 reader() 的回调函数。
内容被作为原始文本数据处理。
js
// Given this HTMLInputElement of type="file":
// <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) => {
// No files, do nothing.
if (!evt.target.files) {
return;
}
reader(evt.target.files[0], (err, res) => {
console.log(res); // Base64 `data:image/...` String result.
});
});
鉴于 FileReader 的异步性质，您可以使用基于 Promise 的方法。以下是一个用于带有 multiple 属性的 文件输入 的示例，它返回一个 Promise。
js
// Given this 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) {
// In this specific case, Promise.all() might be preferred
// over Promise.allSettled(), since it isn't trivial to modify
// a FileList to a subset of files of what the user initially
// selected. Therefore, let's just stash the entire operation.
console.error(err);
return;
}
fileResults.forEach((fr) => {
console.log(fr.result); // Base64 `data:image/...` String result.
});
}
// HTMLInputElement type="file" Event handler:
document.querySelector("#images").addEventListener("change", (evt) => {
// If no files, do nothing.
if (!evt.target.files) {
return;
}
logImagesData([...evt.target.files]);
});
规范
| 规范 |
|---|
| File API # dom-filereader-result |
浏览器兼容性
加载中…