vue中使用element的upload插件获取本地txt/sql文件中的内容

最新推荐文章于 2024-03-27 16:51:23 发布

阳光下的暖和

最新推荐文章于 2024-03-27 16:51:23 发布

阅读量1.8k

点赞数 1

分类专栏：个人经验文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49991545/article/details/127683351

版权

个人经验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求

需求：支持 .txt 和 .sql 后缀文件内容的读取（包括解决之后出现中文乱码的问题）。

直接上代码

html部分

           // 上传组件
            <el-upload
              ref="upload-sql"
              action=''
              accept=".txt,.sql"
              :auto-upload="false"
              :on-change="changeFile"
              :http-request="uploadHandler">
                <el-button class="mr-2" plain slot="trigger" size="small">
                  <i class="el-icon-upload mr-1 font-size-14"></i>读取文件
              </el-button>支持 .txt 和 .sql 文件读取
            </el-upload>
// 展示用的富文本框
      	<el-input
          type="textarea"
          :rows="40"
          placeholder="SQL输入"
          v-model="textarea">
        </el-input>

js部分

//判断文件是否是GB2312编码
import {isGb} from './isGb/isGb.js'

export default {
  name: "sqlImport",
  data () {
    return { 
        textarea: ''
    }
  },
  methods: {
        
      changeFile (file, fileList) {
        if (file.status === 'ready') {
          // 已上传文件列表如果存在 2 条记录，移除第一条，实现替换效果
          if (fileList.length === 2) {
            fileList.shift()
          }
         
          // 手动开始上传
          this.$refs['upload-sql'].submit()
        }
      },
      uploadHandler (params) {

         return new Promise(async (resolve, reject) => {
          const isLt12M = params.file.size / 1024 / 1024 < 2;
          if (!isLt12M) {
            this.$notify({
              message: "文件超过2MB大小，请按照要求整理上传",
              type: 2
            });
            return reject(false);
          }
          try {
            await isGb(params.file);
          } catch (e) {
            params.onProgress({ percent: this.getRandomNum(19, 99) })
            setTimeout(() => {
              this.readText(params,'UTF-8')
            }, 100)
            return reject(false);
          }
          params.onProgress({ percent: this.getRandomNum(19, 99) })
          setTimeout(() => {
            this.readText(params,'GB2312')
          }, 100)
        });
      },
      
      async readText (params,format) {
        // UTF-8,GBK,GB2312
        const readFile = new FileReader()
        readFile.readAsText(params.file, format)
        readFile.onload = (e) => {
          this.textarea = e.target.result;
          console.log(this.textarea);
          
          params.onProgress({ percent: 100 }) // 调用 element ui 进度条
          params.onSuccess() // 调用 element ui 上传成功方法
        }
      },
  }  
}

isGb.js

   // 判断文本编码格式
export async function isGb (file) {
    return await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsText(file,'GB2312');
      console.log(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(""));
        }
      };
  
      reader.onerror = () => {
        reject(new Error("文件内容读取失败，请检查文件是否损坏"));
      };
    });
  };