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:{}}
问题解决。