如何使用 Electron 自行开发 Upyun 文件上传客户端

2024-02-09 16:11:36







**前言** 

Upyun 是一家云存储服务提供商，提供高效、安全的文件存储和传输服务。Electron 是一个跨平台的桌面应用程序开发框架，能够帮助开发者轻松构建适用于 Windows、macOS 和 Linux 的桌面应用程序。

**准备工作** 

在开始开发之前，您需要确保已经安装了以下软件：

- Node.js
- Electron
- Upyun SDK for Node.js

您还可以参考 Electron 的官方网站了解如何安装和使用 Electron。

**创建项目** 

首先，创建一个新的 Electron 项目，您可以使用以下命令：

electron-forge init my-app


这将创建一个名为 `my-app` 的新 Electron 项目。

**安装 Upyun SDK** 

接下来，您需要安装 Upyun SDK for Node.js，您可以使用以下命令：

npm install upyun


这将把 Upyun SDK 安装到您的项目中。

**编写代码** 

现在，您可以开始编写代码了。首先，您需要创建一个新的窗口，您可以使用以下代码：

```javascript
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

win.loadFile('index.html')

这将创建一个新的浏览器窗口，并加载 index.html 文件。

接下来，您需要在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="file" id="file-input">
  <button type="button" id="upload-button">上传</button>

  <script>
    const upyun = require('upyun')

    const client = new upyun.Client({
      bucket: 'your-bucket-name',
      operator: 'your-operator-name',
      password: 'your-password'
    })

    document.getElementById('upload-button').addEventListener('click', () => {
      const file = document.getElementById('file-input').files[0]

      client.putFile('/path/to/file', file, (err, res) => {
        if (err) {
          console.error(err)
        } else {
          console.log('文件上传成功')
        }
      })
    })
  </script>
</body>
</html>