我正在做一个小项目,我允许用户从前端(react)上传文本沿着图像。处理文本并将图像写入服务器端的磁盘。我的Web服务器后端使用的是Rust Axum。
我可以把它写到磁盘上,没有错误,但我根本无法查看图像(Web服务器在我的笔记本电脑中进行本地开发)。当我双击查看图像时,它会出现一个错误,即文件无法打开,因为它可能已损坏。有人能指出我哪里做错了吗?下面是我的代码片段。先谢谢你了!
let mut title_one = String::from("");
let mut title_two = String::from("");
while let Some(mut field) = multipart.next_field().await.unwrap() {
let name = field.name().unwrap().to_string();
let data = field.bytes().await.unwrap();
match name.as_ref() {
"title_one" => title_one = str::from_utf8(&data).unwrap().to_owned(),
"title_two" => title_two = str::from_utf8(&data).unwrap().to_owned(),
"my_image" => {
let file_name = Path::new("test.png").file_name().unwrap();
let full_path = Path::new("image_dir").join(file_name);
tokio::fs::write(full_path, data).await.unwrap();
}
}
test.png将被写入image_dir,但它不是有效的png文件。我看不见。我也试过图片箱如下。但是,它在解码时出现错误“无法读取图像:不支持(UnsupportedError { format:未知,种类:格式(未知)})'。我也不知道为什么。
"my_image" => {
let reader = Reader::new(Cursor::new(data))
.with_guessed_format()
.expect("This will never fail using Cursor");
let img = reader.decode().expect("Failed to read image");
img.save("image_dir/test.png")
.unwrap();
我上传的前端代码是
const formData = new FormData(e.target as HTMLFormElement);
const data = new FormData();
data.append("my_image", e.target.files[0] || "");
data.append("title_one", formData.get("title_one")?.toString().trim() || "");
data.append("title_two", formData.get("title_two")?.toString().trim() || "");
const endpoint = '/api/my_endpoint';
const payload = {
method: 'POST',
headers: new Headers({
'Accept': 'application/json',
}),
body: data,
}
1条答案
按热度按时间b0zn9rqh1#
问题出在你的前端代码上。您将
e.target
转换为HTMLFormElement
,然后在e.target
上使用字段files
。但是HTMLFormElement
对象上没有files
字段(MDN documentation)。因此,您可能正在上传空字符串""
作为图像数据。错误:
如果您尝试解码空文件,则会出现。
您可能想访问
HTMLInputElement
上的files
字段。以下示例按预期工作:或者,您可以使用API客户端(如Postman)测试API端点。