接上一篇繼續，上傳文件是 web開發中的常用功能，本文將演示axum如何實現圖片上傳（注：其它類型的文件原理相同），一般來說要考慮以下幾個因素：
1. 文件上傳的大小限制
2. 文件上傳的類型限制（僅限指定類型：比如圖片）
3. 防止偽裝mimetype進行攻擊（比如：把.js文件改后綴變成.jpg偽裝圖片上傳，早期有很多這類攻擊)
另外，上傳圖片后，還可以讓瀏覽器重定向到上傳后的圖片（當然，僅僅只是演示技術實現，實際應用中並非一定要這樣）
先展示一個簡單的上傳文件的表單：
// 上傳表單
async fn show_upload() -> Html<&'static str> {
Html(
r#"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上傳文件(僅支持圖片上傳)</title>
</head>
<body>
<form action="/save_image" method="post" enctype="multipart/form-data">
<label>
上傳文件(僅支持圖片上傳)：
<input type="file" name="file">
</label>
<button type="submit">上傳文件</button>
</form>
</body>
</html>
"#,
)
}
上傳后，用/save_image來處理圖片上傳
// 上傳圖片
async fn save_image(
ContentLengthLimit(mut multipart): ContentLengthLimit<
Multipart,
{
1024 * 1024 * 20 //20M
},
>,
) -> Result<(StatusCode, HeaderMap), String> {
if let Some(file) = multipart.next_field().await.unwrap() {
//文件類型
let content_type = file.content_type().unwrap().to_string();
//校驗是否為圖片(出於安全考慮)
if content_type.starts_with("image/") {
//根據文件類型生成隨機文件名(出於安全考慮)
let rnd = (random::<f32>() * 1000000000 as f32) as i32;
//提取"/"的index位置
let index = content_type
.find("/")
.map(|i| i)
.unwrap_or(usize::max_value());
//文件擴展名
let mut ext_name = "xxx";
if index != usize::max_value() {
ext_name = &content_type[index + 1..];
}
//最終保存在服務器上的文件名
let save_filename = format!("{}/{}.{}", SAVE_FILE_BASE_PATH, rnd, ext_name);
//文件內容
let data = file.bytes().await.unwrap();
//輔助日志
println!("filename:{},content_type:{}", save_filename, content_type);
//保存上傳的文件
tokio::fs::write(&save_filename, &data)
.await
.map_err(|err| err.to_string())?;
//上傳成功后，顯示上傳后的圖片
return redirect(format!("/show_image/{}.{}", rnd, ext_name)).await;
}
}
//正常情況，走不到這里來
println!("{}", "沒有上傳文件或文件格式不對");
//當上傳的文件類型不對時，下面的重定向有時候會失敗(感覺是axum的bug)
return redirect(format!("/upload")).await;
}
上面的代碼，如果上傳成功，將自動跳轉到/show_image來展示圖片：
/**
* 顯示圖片
*/
async fn show_image(Path(id): Path<String>) -> (HeaderMap, Vec<u8>) {
let index = id.find(".").map(|i| i).unwrap_or(usize::max_value());
//文件擴展名
let mut ext_name = "xxx";
if index != usize::max_value() {
ext_name = &id[index + 1..];
}
let content_type = format!("image/{}", ext_name);
let mut headers = HeaderMap::new();
headers.insert(
HeaderName::from_static("content-type"),
HeaderValue::from_str(&content_type).unwrap(),
);
let file_name = format!("{}/{}", SAVE_FILE_BASE_PATH, id);
(headers, read(&file_name).unwrap())
}
/**
* 重定向
*/
async fn redirect(path: String) -> Result<(StatusCode, HeaderMap), String> {
let mut headers = HeaderMap::new();
//重設LOCATION，跳到新頁面
headers.insert(
axum::http::header::LOCATION,
HeaderValue::from_str(&path).unwrap(),
);
//302重定向
Ok((StatusCode::FOUND, headers))
}
最后是路由設置：
#[tokio::main]
async fn main() {
// Set the RUST_LOG, if it hasn't been explicitly defined
if std::env::var_os("RUST_LOG").is_none() {
std::env::set_var("RUST_LOG", "example_sse=debug,tower_http=debug")
}
tracing_subscriber::fmt::init();
// our router
let app = Router::new()
.route("/upload", get(show_upload))
.route("/save_image",post(save_image))
.route("/show_image/:id", get(show_image))
.layer(TraceLayer::new_for_http());
let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
// run it with hyper on localhost:3000
axum::Server::bind(&addr)
.serve(app.into_make_service())
.await
.unwrap();
}
運行效果：
1. 初始上傳表單：
2. 文件尺寸太大時
3.文件類型不對時
從輸出日志上看
2022-01-23T03:56:33.381051Z DEBUG request{method=POST uri=/save_image version=HTTP/1.1}: tower_http::trace::on_request: started processing request
沒有上傳文件或文件格式不對
2022-01-23T03:56:33.381581Z DEBUG request{method=POST uri=/save_image version=HTTP/1.1}: tower_http::trace::on_response: finished processing request latency=0 ms status=302
已經正確處理，並發生了302重定向，但是瀏覽器里會報錯connection_reset（不知道是不是axum的bug)
4. 成功上傳后
最后附上完整代碼：
cargo.xml
[package]
name = "uploadfile"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
axum = {version = "0.4.3", features = ["multipart","headers"] }
tokio = { version = "1.0", features = ["full"]}
rand = "0.7.3"
tower-http = { version = "0.2.0", features = ["fs", "trace"] }
futures = "0.3"
tokio-stream = "0.1"
headers = "0.3"
tracing = "0.1"
tracing-subscriber = { version="0.3", features = ["env-filter"] }
main.rs
use axum::{
extract::{ContentLengthLimit, Multipart, Path},
http::header::{HeaderMap, HeaderName, HeaderValue},
http::StatusCode,
response::Html,
routing::{get,post},
Router,
};
use rand::prelude::random;
use std::fs::read;
use std::net::SocketAddr;
use tower_http::trace::TraceLayer;
const SAVE_FILE_BASE_PATH: &str = "/Users/jimmy/Downloads/upload";
// 上傳表單
async fn show_upload() -> Html<&'static str> {
Html(
r#"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上傳文件(僅支持圖片上傳)</title>
</head>
<body>
<form action="/save_image" method="post" enctype="multipart/form-data">
<label>
上傳文件(僅支持圖片上傳)：
<input type="file" name="file">
</label>
<button type="submit">上傳文件</button>
</form>
</body>
</html>
"#,
)
}
// 上傳圖片
async fn save_image(
ContentLengthLimit(mut multipart): ContentLengthLimit<
Multipart,
{
1024 * 1024 * 20 //20M
},
>,
) -> Result<(StatusCode, HeaderMap), String> {
if let Some(file) = multipart.next_field().await.unwrap() {
//文件類型
let content_type = file.content_type().unwrap().to_string();
//校驗是否為圖片(出於安全考慮)
if content_type.starts_with("image/") {
//根據文件類型生成隨機文件名(出於安全考慮)
let rnd = (random::<f32>() * 1000000000 as f32) as i32;
//提取"/"的index位置
let index = content_type
.find("/")
.map(|i| i)
.unwrap_or(usize::max_value());
//文件擴展名
let mut ext_name = "xxx";
if index != usize::max_value() {
ext_name = &content_type[index + 1..];
}
//最終保存在服務器上的文件名
let save_filename = format!("{}/{}.{}", SAVE_FILE_BASE_PATH, rnd, ext_name);
//文件內容
let data = file.bytes().await.unwrap();
//輔助日志
println!("filename:{},content_type:{}", save_filename, content_type);
//保存上傳的文件
tokio::fs::write(&save_filename, &data)
.await
.map_err(|err| err.to_string())?;
//上傳成功后，顯示上傳后的圖片
return redirect(format!("/show_image/{}.{}", rnd, ext_name)).await;
}
}
//正常情況，走不到這里來
println!("{}", "沒有上傳文件或文件格式不對");
//當上傳的文件類型不對時，下面的重定向有時候會失敗(感覺是axum的bug)
return redirect(format!("/upload")).await;
}
/**
* 顯示圖片
*/
async fn show_image(Path(id): Path<String>) -> (HeaderMap, Vec<u8>) {
let index = id.find(".").map(|i| i).unwrap_or(usize::max_value());
//文件擴展名
let mut ext_name = "xxx";
if index != usize::max_value() {
ext_name = &id[index + 1..];
}
let content_type = format!("image/{}", ext_name);
let mut headers = HeaderMap::new();
headers.insert(
HeaderName::from_static("content-type"),
HeaderValue::from_str(&content_type).unwrap(),
);
let file_name = format!("{}/{}", SAVE_FILE_BASE_PATH, id);
(headers, read(&file_name).unwrap())
}
/**
* 重定向
*/
async fn redirect(path: String) -> Result<(StatusCode, HeaderMap), String> {
let mut headers = HeaderMap::new();
//重設LOCATION，跳到新頁面
headers.insert(
axum::http::header::LOCATION,
HeaderValue::from_str(&path).unwrap(),
);
//302重定向
Ok((StatusCode::FOUND, headers))
}
#[tokio::main]
async fn main() {
// Set the RUST_LOG, if it hasn't been explicitly defined
if std::env::var_os("RUST_LOG").is_none() {
std::env::set_var("RUST_LOG", "example_sse=debug,tower_http=debug")
}
tracing_subscriber::fmt::init();
// our router
let app = Router::new()
.route("/upload", get(show_upload))
.route("/save_image",post(save_image))
.route("/show_image/:id", get(show_image))
.layer(TraceLayer::new_for_http());
let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
// run it with hyper on localhost:3000
axum::Server::bind(&addr)
.serve(app.into_make_service())
.await
.unwrap();
}