【Tauri2】049—

【Tauri2】049——upload

news2025/6/4 14:06:30

前言

这篇就看看一个简单地插件——upload

Upload | Taurihttps://tauri.app/plugin/upload/upload的英文意思是“上传（程序或信息）”。

看来是用来上传文件的。

支持移动端

正文

安装

pnpm tauri add upload

在前后端都会安装，即

        .plugin(tauri_plugin_upload::init())

    "@tauri-apps/plugin-upload": "~2.2.1",

看看通信函数

        .invoke_handler(tauri::generate_handler![download, upload])

一个是download，一个是upload。

看看其中的download的函数签名

#[command]
async fn download(
    url: &str,
    file_path: &str,
    headers: HashMap<String, String>,
    body: Option<String>,
    on_progress: Channel<ProgressPayload>,
) -> Result<()>

url：需要下载的网址
file_path：保存的路径
headers：请求头
body：请求体
on_progress：是一个Channel，其中类型是ProgressPayload

其中这个ProgressPayload是什么东西？

#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct ProgressPayload {
    progress: u64,
    progress_total: u64,
    total: u64,
    transfer_speed: u64,
}

实现了Clone、Serialize。

从其中的英文意思，可以简单地发现——用于封装下载进度信息（当前进度、总大小、传输速度等）。

总体看来，这个download函数意思就是下载文件的，封装了reqwest。

和http插件大同小异，只是更具体了。

看看upload函数

#[command]
async fn upload(
    url: &str,
    file_path: &str,
    headers: HashMap<String, String>,
    on_progress: Channel<ProgressPayload>,
) -> Result<String>

和download差不多。

这两个函数，一个下载，一个上传。

本质就是发送一个请求。

笔者发现好像不能在Rust中使用。就在前端使用

download

下载，可以下载图片，也可以下载文件。笔者找了一个文件

笔者先下个图片试试，图片的地址如下

OIP.cIGsR32hEtqHtejFiRP2jAHaHa (474×474)https://th.bing.com/th/id/OIP.cIGsR32hEtqHtejFiRP2jAHaHa?rs=1&pid=ImgDetMain前端代码如下

    async function clicked() {
        let imageUrl="https://th.bing.com/th/id/OIP.cIGsR32hEtqHtejFiRP2jAHaHa?rs=1&pid=ImgDetMain"
        let filepath="C:\\Users\\26644\\Downloads\\tt.jpg"
        let headers={
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3"
        }
        await download(
            imageUrl,
            filepath,
            ({progress, total}) =>
                console.log(`Downloaded ${progress} of ${total} bytes`),
            headers
        )

    }

然而，笔者运行的时候报错了

"error sending request for url (https://th.bing.com/th/id/OIP.cIGsR32hEtqHtejFiRP2jAHaHa?rs=1&pid=ImgDetMain)"

说实话，笔者不是很理解，这都能报错，就是发送一个请求。

然后，笔者打断点，发现在download这个通信函数中

下面代码

    let response = request.send().await?;

每次运行到这一步就会直接打包。

笔者也没找到解决办法。笔者搜了搜。

还是不行。

笔者发现这个插件的features有三个选项

都是tls

TLS 是用于网络通信加密的协议，确保数据安全、完整和身份验证，广泛用于 HTTPS 请求。

因此，看来问题就在这里。

native-tls 使用系统 TLS 库，依赖环境。
native-tls-vendored 使用内置 OpenSSL，跨平台一致。
rustls-tls 使用纯 Rust 的 rustls，内存安全但兼容性可能稍差。

因此，笔者使用native-tls-vendored，即

tauri-plugin-upload = { version = "2.2.1", features = ["native-tls-vendored"] }

结果如下

笔者使用其他也可以的。

再比如，下载yakit。

yaklang/yakit: Cyber Security ALL-IN-ONE Platformhttps://github.com/yaklang/yakit其下载的地址

https://github.com/yaklang/yakit/releases/download/v1.4.1-0530/Yakit-1.4.1-0530-windows-amd64.exehttps://github.com/yaklang/yakit/releases/download/v1.4.1-0530/Yakit-1.4.1-0530-windows-amd64.exe结果如下

有点慢，没问题

这里感觉可以可视化。添加进度条。

搞个进度条，结果如下

import {useState} from 'react';
import {download} from '@tauri-apps/plugin-upload';
import './Home.css';

export default function Home() {
    const [progress, setProgress] = useState(0);
    const [progressText, setProgressText] = useState('0 / 0 bytes');
    const [isDownloading, setIsDownloading] = useState(false);

    const clicked = async () => {
        setIsDownloading(true);
        setProgress(0);
        setProgressText('0 / 0 bytes');

        const url = 'https://github.com/yaklang/yakit/releases/download/v1.4.1-0530/Yakit-1.4.1-0530-windows-amd64.exe';
        const filePath = 'C:\\Users\\26644\\Downloads\\yakit.exe';
        const headers = new Map<string, string>([
            ['User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'],
        ]);

        try {
            await download(
                url,
                filePath,
                ({progressTotal, total}) => {
                    let percentage = (progressTotal / total) * 100
                    setProgress(percentage);
                    setProgressText(`${progressTotal} / ${total} bytes`);
                },
                headers
            );
            setProgress(100);
            setProgressText('下载完成！');
        } catch (error:{ message?: string } | any) {
            console.error('下载失败:', JSON.stringify(error, null, 2));
            setProgressText(`下载失败: ${error.message || error}`);
        } finally {
            setIsDownloading(false);
        }
    };

    return (
        <div className="container">
            <h2>文件下载</h2>
            <button onClick={clicked} disabled={isDownloading}>
                {isDownloading ? '下载中...' : '开始下载'}
            </button>
            <div className="progress-container">
                <progress value={progress} max="100"/>
                <div className="progress-text">{progressText}</div>
            </div>
        </div>
    );
}

.container {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
  font-family: Arial, sans-serif;
}

.progress-container {
  margin-top: 20px;
}

progress {
  width: 100%;
  height: 30px;
  border-radius: 5px;
  /* 自定义进度条样式（可选） */
  -webkit-appearance: none;
  appearance: none;
}

progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 5px;
}

progress::-webkit-progress-value {
  background-color: #007bff;
  border-radius: 5px;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

结果如下