网站后台上传图片做难吗网页生成

前言

这篇就看看一个简单地插件——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<()> 

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<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) * 100setProgress(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;
}

结果如下 

 

没问题。

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

就这样。