详细介绍：【Tauri2】049——upload

前言

这篇就看看一个简单地插件——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,    body: Option,    on_progress: Channel,) -> Result

1. url：需要下载的网址
2. file_path：保存的路径
3. headers：请求头
4. body：请求体
5. 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,    on_progress: Channel,) -> Result

和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([            ['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 (                    文件下载                                                        {progressText}                        );}

.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;}

结果如下 

 

没问题。

还有一个upload这个函数，笔者就不演示了，主要是不知道上传什么。

就这样。