element 上传fileUpload 同步【文本编码格式】

fileUpload 普通判断无法阻止条件判断
需使用Promise + (async + await ) 加以阻止

html

<el-upload
  class="hot-upload"
  :action="fileUrl"
  :headers="fileHeaders"
  :on-progress="fileProgress"
  :before-upload="fileUpload"
  :on-success="fileSuccess"
  :multiple="false"
  :show-file-list="false"
  :on-exceed="handleExceed"></el-upload>

js

// 上传前检测【检测文本编码格式】
import {isUtf8} from "@/utils";

fileUpload(file) {
 // resolve(file) 正确放行file
 return new Promise(async (resolve, reject) => {
   const isTxt = file.type === "text/plain";
   const isLt12M = file.size / 1024 / 1024 < 12;
   if (!isTxt) {
     this.$toast({
       message: "请按照提示要求上传对应TXT文件格式",
       type: 2
     });
     return reject(false);
   }
   if (!isLt12M) {
     this.$toast({
       message: "文件超过12MB大小，请按照要求整理上传",
       type: 2
     });
     return reject(false);
   }
   try {
     await isUtf8(file);
   } catch (e) {
     this.$toast({
       message: "编码格式错误，请上传 UTF-8 格式文件",
       type: 2
     });
     return reject(false);
   }
   return resolve(file);
 });
},

封装方法

// 判断文本编码格式
export async function isUtf8 (file) {
  return await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsText(file);

    reader.onloadend = (e) => {
      const str = e.target.result;
      // 大致取一半
      const sampleStr = str.slice(4, 4 + str.length / 2);
      if (sampleStr.indexOf("�") === -1) {
        resolve(true);
      } else {
        reject(new Error("编码格式错误，请上传 UTF-8 格式文件"));
      }
    };

    reader.onerror = () => {
      reject(new Error("文件内容读取失败，请检查文件是否损坏"));
    };
  });
};