Flutter web 文件上传和下载

由于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下载和上传文件的方式,可以采用上述方法。

你可能感兴趣的:(Flutter web 文件上传和下载)