美文网首页
Flutter web 文件上传和下载

Flutter web 文件上传和下载

作者: 一个没有记忆的梦 | 来源:发表于2022-09-05 13: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下载和上传文件的方式,可以采用上述方法。

相关文章

  • Flutter web 文件上传和下载

    由于Flutter在web平台上的运行机制不同,所以使用常规的下载方式一般会下载失败,因此根据实际需求和网上的资源...

  • Flutter文件上传和下载

    先说说我为了测试文件上传和下载做了哪些前期准备吧,首先我把我的个人域名申请了一张ssl证书(https),然后我自...

  • 文件上传与下载

    文件上传和下载 文件上传和下载是JAVA WEB中常见的一种操作,文件上传主要是将文件通过IO流传输到服务器的某一...

  • Java Web文件上传展示进度

    1、文件上传演示准备 接前面“Java Web中的文件上传和下载” 为了演示文件上传,先新增一个用于接收文件上传的...

  • Java Web中的文件上传和下载

    这里主要结合代码说明Java Web中文件上传和下载的机制。 1、文件上传示例说明 这里从一个文件上传的例子,看下...

  • JavaWeb实现文件上传、下载功能

    前言 在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能...

  • 文件上传和下载

    一、概论 在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载...

  • Java Web 文件上传和下载

    前言 Java Web 三大组件已经学完了,今天学习Java代码实现文件的上传和下载,也是经常出现漏洞的一个关键...

  • 文件上传下载接口

    文件上传下载接口 文件上传 首先确保你引入了 web starter 配置文件上传大小限制 编写控制层传文件 文件...

  • Flutter web开发环境搭建

    1). Flutter web 2). Flutter web doc 3). 搭建环境 下载Flutter SD...

网友评论

      本文标题:Flutter web 文件上传和下载

      本文链接:https://www.haomeiwen.com/subject/bhbvnrtx.html