【工具JS】js获取txt文本的内容

【工具JS】js获取txt文本的内容

js读取文本文件的内容，这里有两个常见方式：

1.FileReader方式

const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function () {
    const content = reader.result;
    console.log(content);
  };

2.fetch方式

const tempUrl = URL.createObjectURL(file);
  fetch(tempUrl)
    .then((res: any) => {
      console.log(res);
      if (res.ok) {
        res.text().then((res: any) => {
          console.log(res);
        });
      } else {
        throw new Error("Network response was not ok.");
      }
    })
    .catch((err: any) => {
      console.error(err);
    });

案例解释

vue3 + element-plus

<script setup lang="ts">
import { ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";

// 格式校验
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "text/plain") {
    ElMessage.error("请选择文本文件!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 20) {
    ElMessage.error("文本最大20MB!");
    return false;
  }
  return true;
};

// 自定义上传
async function handleRequest(info: any) {
  const { file } = info;
  console.log(file);

  // 方式一
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function () {
    const content = reader.result;
    console.log(content);
  };
  
  // 方式二
  const tempUrl = URL.createObjectURL(file);
  fetch(tempUrl)
    .then((res: any) => {
      console.log(res);
      if (res.ok) {
        res.text().then((res: any) => {
          console.log(res);
        });
      } else {
        throw new Error("Network response was not ok.");
      }
    })
    .catch((err: any) => {
      console.error(err);
    });
}
</script>

<template>
    <div class="flex-row-center-center">
      <el-upload
        drag
        multiple
        class="tools-item"
        accept="text/plain"
        :limit="50"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="handleRequest"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          <em>选择文本</em>
        </div>
      </el-upload>
    </div>
</template>