JS前端读取本地上传的File文件对象内容（包括Base64、text、JSON、Blob、ArrayBuffer等类型文件）

这篇具有很好参考价值的文章主要介绍了JS前端读取本地上传的File文件对象内容（包括Base64、text、JSON、Blob、ArrayBuffer等类型文件）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

读取base64图片File

file2Base64Image(file, cb) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        cb && cb(e.target.result);//即为base64结果
    };
},

读取text、JSON文件File

readText(file, { onloadend } = {}) {
    const reader = new FileReader();
    reader.onloadend = function (e) {
        onloadend && onloadend(reader.result, e);
    };
    reader.readAsText(file);
},

读取分段Blob文件File（ArrayBuffer）

FileReader.readAsArrayBuffer() - Web API 接口参考 | MDNFileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer文章来源地址https://www.toymoban.com/news/detail-616788.html

readArrayBuffer(file, { onloadstart, onprogress, onload } = {}) {
    const reader = new FileReader();
    // 开始读取
    reader.onloadstart = function (e) {
        onloadstart && onloadstart(e);
    };
    // 正在加载
    reader.onprogress = function (p) {
        onprogress && (parseFloat(p.loaded / file.size).toFixed(2));
    };
    // 加载完成
    reader.onload = function (e) {
        if (reader.error) { return; }
        let buffer = new Uint8Array(reader.result);
        onload && onload(reader.result, buffer, e);
    };
    reader.readAsArrayBuffer(file);
},

到了这里，关于JS前端读取本地上传的File文件对象内容（包括Base64、text、JSON、Blob、ArrayBuffer等类型文件）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！