📅 最后修改于: 2023-12-03 15:14:51.476000 🧑 作者: Mango
ElectronJS 是一个用于构建跨平台桌面应用的开源框架，它基于 Chromium 和 Node.js 开发。在开发 ElectronJS 应用时，经常需要向服务器上传文件。本文将介绍如何在 ElectronJS 应用中进行文件上传。
在学习文件上传之前，需要对 HTTP 协议有一定的了解。HTTP 是 Web 应用中请求-响应协议的基础，其常见请求类型包括 GET、POST、PUT 等。
关于 Node.js 和 ElectronJS 的基础知识，这里不再赘述，读者可以参考 Node.js 和 ElectronJS 的官方文档。
在 Web 应用中，最常用的文件上传方式是通过 HTML 表单进行上传。在 ElectronJS 应用中，只需要在渲染进程中使用 form 表单即可。
以下是一个简单的表单示例：
<form action="http://example.com/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
上面的代码中，action 属性指定表单的提交地址，method 属性指定请求方法，enctype 属性指定表单数据的编码方式。input 标签的 type 属性为 file，表示上传文件的控件。
在 ElectronJS 应用中，需要注意的是表单默认会以 HTML 的方式进行提交，无法直接访问 Node.js 的 API。需要使用 ElectronJS 的 remote 模块来访问主进程的 API，然后通过 IPC 通信将表单数据传递给主进程。
以下是一个简单的 ElectronJS 表单上传示例：
<!-- renderer/index.html -->
<html>
<body>
<form id="my-form" action="http://example.com/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload" onclick="submitForm(event)">
</form>
</body>
<script>
const { ipcRenderer } = require('electron')
function submitForm(event) {
event.preventDefault()
const form = document.getElementById('my-form')
const formData = new FormData(form)
ipcRenderer.send('file-upload', formData)
}
</script>
</html>
// main.js
const { ipcMain } = require('electron')
const { session } = require('electron/main')
ipcMain.on('file-upload', (event, formData) => {
const request = session.defaultSession.createUploadTask('http://example.com/upload', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
}
}, (uploadEvent) => {
console.log(uploadEvent)
})
formData.forEach((value, key) => {
request.addFile(key, value.path)
})
})
上面的代码中，当表单提交时，会触发 submitForm 函数，该函数会阻止表单默认提交行为，然后获取表单数据，并将其传递给主进程。
在主进程中，通过 ElectronJS 的 session.createUploadTask 方法创建一个文件上传任务，接着使用 formData 中的数据添加文件，并发起请求。
在 ElectronJS 应用中，除了使用 HTML 表单上传文件外，还可以通过 Node.js 中的 http 模块直接发送 HTTP 请求来实现文件上传。
以下是一个简单的 Node.js 文件上传示例：
const http = require('http')
const fs = require('fs')
const options = {
hostname: 'example.com',
port: 80,
path: '/upload',
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
}
}
const file = fs.readFileSync('/path/to/file')
const req = http.request(options, res => {
console.log(`statusCode: ${res.statusCode}`)
res.on('data', d => {
console.log(d.toString())
})
})
req.on('error', error => {
console.error(error)
})
req.write(file)
req.end()
上面的代码中，使用 fs.readFileSync 方法读取文件内容，然后创建一个 http.request 对象，将文件内容发送到指定的服务器上。
在 ElectronJS 应用中，可以通过 ElectronJS 的 remote 模块访问 Node.js 的 API，同样需要通过 IPC 通信将文件数据传递给主进程。
// renderer.js
const { ipcRenderer } = require('electron')
const fs = require('fs')
ipcRenderer.on('file-upload', (event, fileData) => {
const file = fs.readFileSync(fileData.path)
// 省略 http.request 的代码...
req.write(file)
req.end()
})
// main.js
const { ipcMain } = require('electron')
ipcMain.on('file-upload', (event, fileData) => {
// 省略 http.request 的代码...
req.write(fileData)
req.end()
})
本文介绍了 ElectronJS 应用中的两种文件上传方式：HTML 表单方式和 Node.js 的方式。HTML 表单方式相对简单，但需要在渲染进程和主进程之间进行 IPC 通信，比较繁琐；而 Node.js 的方式可以直接访问 Node.js 的 API，代码逻辑相对简单，适合传输大文件。