fix: 注入webview功能

This commit is contained in:
NICE CODE BY DEV 2024-04-09 09:36:15 +08:00
parent b65cb471e3
commit 79128529bf
4 changed files with 21 additions and 16 deletions

View File

@ -2,6 +2,8 @@ body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif; Arial, sans-serif;
margin: auto; margin: auto;
max-width: 38rem; }
padding: 2rem;
webview {
height: 100vh;
} }

View File

@ -7,5 +7,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<webview id="" src="https://nicecoders.github.io" />
</body> </body>
</html> </html>

View File

@ -15,7 +15,8 @@ const createWindow = (): void => {
height: 600, height: 600,
width: 800, width: 800,
webPreferences: { webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
webviewTag: true
}, },
}); });

View File

@ -5,7 +5,7 @@ import path from 'node:path';
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
export const uploadFile = (filePaths: string[], _sender: Electron.WebContents) => { export const uploadFile = (filePaths: string[], _sender: Electron.WebContents) => {
// 获取用户当前文件夹路径 // 获取用户当前文件夹路径
const saveDirectoryPath = app.getPath('userData'); const saveDirectoryPath = app.getPath('downloads');
for (let i = 0; i < filePaths.length; i++) { for (let i = 0; i < filePaths.length; i++) {
const fileName = path.basename(filePaths[i]); const fileName = path.basename(filePaths[i]);
const targetFilePath = path.join(saveDirectoryPath, fileName); const targetFilePath = path.join(saveDirectoryPath, fileName);
@ -35,17 +35,17 @@ export const uploadFile = (filePaths: string[], _sender: Electron.WebContents) =
} }
export const singleUpload = (file: File) => { export const singleUpload = (file: File) => {
let path = file.path; //文件本地路径 const path = file.path; //文件本地路径
let stats = fs.statSync(path); //读取文件信息 const stats = fs.statSync(path); //读取文件信息
let chunkSize = 3 * 1024 * 1024; //每片分块的大小3M const chunkSize = 3 * 1024 * 1024; //每片分块的大小3M
let size = stats.size; //文件大小 const size = stats.size; //文件大小
let pieces = Math.ceil(size / chunkSize); //总共的分片数 const pieces = Math.ceil(size / chunkSize); //总共的分片数
function uploadPiece (i: number) { function uploadPiece (i: number) {
//计算每块的结束位置 //计算每块的结束位置
let enddata = Math.min(size, (i + 1) * chunkSize); const endData = Math.min(size, (i + 1) * chunkSize);
let arr: any[] = []; const arr: any[] = [];
//创建一个readStream对象根据文件起始位置和结束位置读取固定的分片 //创建一个readStream对象根据文件起始位置和结束位置读取固定的分片
let readStream = fs.createReadStream(path, { start: i * chunkSize, end: enddata - 1 }); const readStream = fs.createReadStream(path, { start: i * chunkSize, end: endData - 1 });
//on data读取数据 //on data读取数据
readStream.on('data', (data)=>{ readStream.on('data', (data)=>{
arr.push(data) arr.push(data)
@ -53,13 +53,14 @@ export const singleUpload = (file: File) => {
//on end在该分片读取完成时触发 //on end在该分片读取完成时触发
readStream.on('end', ()=>{ readStream.on('end', ()=>{
//这里服务端只接受blob对象需要把原始的数据流转成blob对象这块为了配合后端才转 //这里服务端只接受blob对象需要把原始的数据流转成blob对象这块为了配合后端才转
let blob = new Blob(arr) const blob = new Blob(arr)
//新建formdata数据对象 //新建formdata数据对象
var formdata = new FormData(); const formdata = new FormData();
formdata.append("file", blob); formdata.append("file", blob);
console.log('blob.size',blob.size) console.log('blob.size',blob.size)
formdata.append("size", size + ''); // 数字30被转换成字符串"30" formdata.append("size", size + ''); // 数字30被转换成字符串"30"
formdata.append("chunk", i + '');//第几个分片从0开始 formdata.append("chunk", i + '');//第几个分片从0开始
formdata.append("chunks", pieces + '');//分片数 formdata.append("chunks", pieces + '');//分片数
})
} }
} }