electron中如何传递blob格式node:electron/js2c/renderer_init:2 Uncaught (in promise) Error: An object could not be cloned. at a.send (node:electron/js2c/renderer_init:2:7346) at getfileWithProgress (App.vue:68:19)
时间: 2024-02-01 14:04:06 浏览: 228
在 Electron 中,由于安全原因,部分对象无法通过 IPC 通信传递,包括 Blob 对象。如果需要在渲染进程和主进程之间传递 Blob 对象,可以先将其转换为 ArrayBuffer 或字符串等支持的数据类型,然后再传递。
以下是在渲染进程中将 Blob 格式的文件流转换为 ArrayBuffer,然后将其传递给主进程的示例代码:
```javascript
// 渲染进程
const { ipcRenderer } = require('electron');
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
const arrayBuffer = reader.result;
ipcRenderer.send('blob-data', { arrayBuffer, type: file.type });
};
reader.readAsArrayBuffer(file);
});
```
上面的代码使用 `FileReader` 对象读取用户选择的文件,然后将文件内容作为 ArrayBuffer 对象发送给主进程,并在同一对象中传递文件类型 `type`。
在主进程中,可以使用以下代码监听渲染进程发送的事件并处理数据:
```javascript
// 主进程
const { ipcMain } = require('electron');
const fs = require('fs');
ipcMain.on('blob-data', (event, data) => {
const arrayBuffer = data.arrayBuffer;
const type = data.type;
const buffer = Buffer.from(arrayBuffer);
const filePath = 'path/to/save/file';
fs.promises.writeFile(filePath, buffer)
.then(() => {
// 文件保存成功
})
.catch((error) => {
// 文件保存失败
});
});
```
上面的代码使用 `Buffer.from()` 方法将 ArrayBuffer 对象转换为 Buffer 对象,然后将其写入本地文件系统。
需要注意的是,在处理二进制数据时,需要确保传递的数据不超过 IPC 通道的最大限制。如果数据过大,应该考虑分批传输,或者使用流的方式进行传输。
阅读全文