Vue.js使用sql.js踩坑

Vue.js使用sql.js踩坑

安装和引用

安装方式和引入方式参考这篇
Vue.js使用SQL.js操作SQLite数据库

使用方法

我的项目使用场景是用户选择一个sqlite文件，然后vue读取文件内指定数据导入到指定的数据库和表。
所以使用方法与参考文章不同。
直接上代码

<el-button type="primary" @click="chooseFile">选择文件</el-button>
<input
      ref="offsetFile"
      type="file"
      style="display:none"
      @change="uploadFile"
    >

对应script

// 上传文件响应
    doUploadFile() {
      this.$refs.offsetFile.click()
    },
    chooseFile() {
      this.doUploadFile()
    },
    uploadFile(event) {
      let flag = true;
      // 初始化
      if (
        typeof event.target.files === 'undefined' ||
        event.target.files.length === 0
      ) {
        this.$message.error('未选中文件')
        return
      }
      //文件操作
      let file = event.target.files[0]
      if(Object.keys(this.importData).includes(file.name)){
        this.$message.error('已选择过相同文件')
        return
      }
      let config = {locateFile: () => sqlWasm}
      let fr = new FileReader()
      // fr.readAsText(file, 'gbk')
      fr.onload = (e) => {
        initSqlJs(config).then(function(SQL){
          const Uint = new Uint8Array(fr.result);
          const db = new SQL.Database(Uint);
          const contents = db.exec("SELECT chno FROM vibdata order by Id");
          console.log(contents);
      });
      }
      fr.readAsArrayBuffer(file)
      // 读文件结束时
      // fr.onloadend = (e) =>{
      //   if(flag){
      //     this.fileArr.push({ path: file.path, isChoose: false, name: file.name })
      //   }
      // }
      
    }

踩坑

如果前面步骤没错，那么大概率代码跑起来之后会出现一个报错：

就是这个玩意儿折磨了我快两个小时，直接看解决方法
找到依赖里sql.js对应的目录下sql.wasm.js文件

把红框里module的值从undefined改成{export:{}}
问题解决。