Flutter web 文件上传和下载
2022-09-05 本文已影响0人
一个没有记忆的梦
由于Flutter在web平台上的运行机制不同,所以使用常规的下载方式一般会下载失败,因此根据实际需求和网上的资源总结了上传和下载的方式,以做记录!!!
使用http.get的方法下载文件,然后在then方法里面处理文件
因是在浏览器中运行所以此方法需到处html库
import 'dart:html';
String url = " url地址";//此处是待下载文件的url地址
String name = "文件名";//下载文件的名称
await http.get(Uri.parse(url)).then((value) async {
final content = base64Encode(value.bodyBytes);
final anchor = AnchorElement(
href:
"data:application/octet-stream;charset=utf-16le;base64,$content")
..setAttribute("download", name)
..click();
return value.bodyBytes;
});
web平台文件的选择
导入html库
import 'dart:html' as html;
html.FileUploadInputElement uploadInput = html.FileUploadInputElement();
uploadInput.multiple = false; // 是否允许选择多文件
uploadInput.draggable = true;
uploadInput.click();
uploadInput.onChange.listen((event) async {
// 选择完成
html.File? file = uploadInput.files?.first;
print('文件大小:${file?.size}-->${file}');
html.FormData formData = html.FormData();
formData.appendBlob('uploadFiles', file.slice(), file.name);
});
单文件:文件选择完成后上传文件,在uploadInput.onChange.listen监听中添加
html.FormData formData = html.FormData();
formData.appendBlob('uploadFiles', file.slice(), file.name);
//上传文件到服务器
var request = html.HttpRequest();
request.open('POST', 'url地址');
request.send(formData);
request.onLoadEnd.listen((event) {
print('上传结果:${request.responseText}');
//因为上传结果返回的是response字符串,所以使用JsonDecoder转成Json格式,进行数据解析
var response = JsonDecoder().convert(request.response);
//Json解析
.......
});
多文件:文件选择完成后添加到Map集合中,需包含file.slice(),file.name,两个value值,其中file.size代表文件大小
html.FormData formData = html.FormData();
for (int i = 0; i < fileAttach.length; i++) {
var attachFiles = fileAttach[i];
var filePath = attachFiles['file'];//file.slice()
String fileName = attachFiles['fileName'];//file.name
//uploadFiles 对应服务器的key值
formData.appendBlob('uploadFiles', filePath, fileName);
}
if (fileAttach.length > 0) {
//上传文件到服务器
var request = html.HttpRequest();
request.open('POST', 'url地址');
request.send(formData);
request.onLoadEnd.listen((event) {
print('上传结果:${request.responseText}');
var response = JsonDecoder().convert(request.response);
});
web下载和上传文件的方式,可以采用上述方法。