js读取本地文件文本内容和远程文件流的文本内容

原创已于 2023-05-09 16:05:50 修改 · 958 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-03-27 17:26:21 首次发布

js 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何使用JavaScript的FileReaderAPI来读取本地文本文件内容，以及如何处理后端返回的二进制文件流，将它们转换为可读的文本格式。这两个函数分别用于本地文件选择和接口响应的处理，都采用了Promise进行异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

读取本地文本文件内容，使用<input type="file" />导入：

export const jsReadFiles = (files,vnode:any) => {
  return new Promise(function(resolve,reject){
    let file = files[0];
    let reader = new FileReader();
        reader.onload = function () {
            resolve(reader.result)
        };
        reader.readAsText(file);
  })
}

读取后端接口返回的二进制文件流的文本内容：

// 读取二进制流文件内容
// type是接口的相应头的content-type
// files是[二进制流]，返回结果包裹的数组
export const jsReadFiles = (files,type) => {
  return new Promise(function(resolve,reject){
    // let file = files;
    let blob = new Blob(files, { type })
    let reader = new FileReader();
        reader.onload = function () {
            resolve(reader.result)
        };
        reader.readAsText(blob);
  })
}

再在需要的页面异步获取