房产网站设计方案,网站集约化 建设方案,土耳其网站后缀,东莞常平嘉盛学校前言#xff1a;好久没写博客了#xff0c;最近一直在忙#xff0c;没时间梳理。最近遇到一个需求是读取本地SQLite文件#xff0c;还是花费了点时间才实现#xff0c;没怎么看到vite方面写这个的文章#xff0c;现在分享出来完整流程。
1.pnpm下载SQL.js(什么都可以下)…前言好久没写博客了最近一直在忙没时间梳理。最近遇到一个需求是读取本地SQLite文件还是花费了点时间才实现没怎么看到vite方面写这个的文章现在分享出来完整流程。
1.pnpm下载SQL.js(什么都可以下)
pnpm add SQL.js2.【重点】如果你执行wasm文件时报错404请执行
pnpm add --save-dev rollup/plugin-wasm在vite.config,js中写入
...build: {rollupOptions: {plugins: [// 在这里添加 wasm 插件wasm({include: /\.wasm$/i // 这里可能需要调整为你的文件路径和名称})],}
}
...3.在使用的页面中你需要引入了但是我在使用setup语法糖写法时候报错因为执行顺序的问题这里有两种解决办法 第一种不使用语法糖使用setup()形式 第二种使用语法糖结合onMountednextTick解决以下
import { onMounted, nextTick, ref } from vue;
import initSqlJs from sql.js;
const databaseContent ref(null);
let SQL, db;
onMounted(async (nextTick) {SQL await initSqlJs({locateFile: (file) /node_modules/sql.js/dist/${file}});db new SQL.Database();
});4.添加选择文件控件选择.db3文件触发onFileChange 方法 input typefile changeonFileChange /divulli v-for(item, index) in databaseContent :keyindex{{ item }}/li/ul/divconst onFileChange (event) {const fileInput event.target;const file fileInput.files[0];if (file) {const reader new FileReader();reader.onload () {const Uints new Uint8Array(reader.result);db new SQL.Database(Uints);const result db.exec(SELECT PhotoFile FROM Photo);if (result result.length) {let table result[0].values.flat().map((str) {let newRow str.replace(.\\, );let newOvrRow newRow .ovr;return [newRow, newOvrRow];});databaseContent.value table.flat();}};reader.readAsArrayBuffer(file);}
};主要是这几句 const Uints new Uint8Array(reader.result);db new SQL.Database(Uints);const result db.exec(SELECT PhotoFile FROM Photo);...reader.readAsArrayBuffer(file);这是db3数据库的结构 我取其中的PhotoFile值(.ovr不用看我自己加的)
