flutter开发实战-文件上传及上传队列

这篇具有很好参考价值的文章主要介绍了flutter开发实战-文件上传及上传队列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flutter开发实战-文件上传及上传队列

之前开发中遇到了发帖子图片上传,上传到七牛。

一、实现Dio上传

上传使用到Dio上传功能,具体代码

// 上传文件(图片)
  doUploadFile(String url, UploadFileInfo fileInfo,
      {Map<String, dynamic>? params,
      OnUploaded? uploaded,
      OnFailure? failure}) async {
    try {
      String timeStamp = DateTime.now().millisecondsSinceEpoch.toString();
      Map<String, dynamic> fromParams = Map();
      if (params != null && params.isNotEmpty) {
        fromParams.addAll(params);
      }

      fromParams["file"] = await MultipartFile.fromFile(fileInfo.file.path,
          filename: '${fileInfo.key}-${timeStamp}.jpg');

      FormData formData = FormData.fromMap(fromParams);
      Response? response = await dio.post(url, data: formData);
      assert(() {
        // assert只会在debug模式下执行,release模式下不会执行
        // 打印信息
        LoggerManager().error('''api: $url\nresult: $response''');
        return true;
      }());

      if (response != null) {
        Map<String, dynamic> result = json.decode(response.toString());
        assert(() {
          // assert只会在debug模式下执行,release模式下不会执行
          // 打印信息
          LoggerManager().debug('''api: $url\nresult: $result''');
          return true;
        }());

        if (response.statusCode == 200) {
          if (uploaded != null) {
            uploaded(result);
          }
        } else {
          //返回失败信息
          LoggerManager().error('''api: $url\nresult: $result''');

          ApiHttpError apiHttpError =
              ApiHttpError(ApiHttpErrorType.Default, "请求失败!");

          if (failure != null) {
            failure(apiHttpError);
          }
        }
      } else {
        //返回失败信息
        // 没有获得response,failure
        ApiHttpError apiHttpError =
            ApiHttpError(ApiHttpErrorType.Default, "请求失败!");

        if (failure != null) {
          failure(apiHttpError);
        }
      }
    } on DioError catch (e, s) {
      // catch到异常,failure
      LoggerManager().error("doUploadFile api: $url, dioError:$e, s:$s");
      ApiHttpError apiHttpError = getRequestFailure(e.response, e.type);

      if (failure != null) {
        failure(apiHttpError);
      }
    } catch (e) {
      // 可以捕获任意异常
      ApiHttpError apiHttpError =
          ApiHttpError(ApiHttpErrorType.Default, "${e.toString()}");

      if (failure != null) {
        failure(apiHttpError);
      }
    }
  }

二、实现上传到七牛uploader_tool

上传七牛需要获取上传七牛的token

void getQiniuToken(
      {required Function(String token) completion,
      required Function(ApiHttpError) failure}) {
    QiniuTokenRequest request = QiniuTokenRequest();
    GApiRepository.getQiniuToken(
      request: request,
      success: (response) async {
        Map<String, dynamic>? object = response.object;
        String token = "";
        if (object != null && object.isNotEmpty) {
          token = object["uptoken"];
        }

        if (completion != null) {
          completion(token);
        }
      },
      failure: (error) {
        if (failure != null) {
          failure(error);
        }
      },
    );
  }

调用doUploadFile实现上传

const String kQiniuUpHost = "http://up.qiniu.com";
const String kQiniuUndefinedKey = "?";
const String kQiniuUserAgent = "qiniu-ios-sdk";

const String kBucket = "bucket";
const String kQiniuDomainPreUrl = "domain";


void uploadImage(String imagePath, String token, {required Function(String key) completion,
    required Function(ApiHttpError) failure}) {
    String? key = StringUtils.toMD5(imagePath);
    String random = StringUtils.getRandom(10);
    String imageKey = "${key}-${random}";

    Map<String, dynamic> params = Map();
    params["bucket"] = "avatar";
    params["x:id"] = imageKey;
    params["token"] = token;
    params["User-Agent"] = kQiniuUserAgent;

    UploadFileInfo fileInfo =
    UploadFileInfo(file: File(imagePath), key: imageKey);

    HttpApi().doUploadFile(
      kQiniuUpHost,
      fileInfo,
      params: params,
      uploaded: (Map<String, dynamic> result) {
        String? aResultKey = result["key"];
        completion(aResultKey ?? "");
      },
      failure: (ApiHttpError error) {
        failure(error);
      },
    );
  }

三、实现上传队列

简单实现上传队列,这里上传采用一个接着一个上传,

代码如下

class UploaderQueue {

  // imagePath - key
  Function(Map<String, String> keys)? completion;

  Function(ApiHttpError error)? failure;

  UploaderQueue({
    this.completion,
    this.failure,
  });

  // 是否有任务正在进行时
  bool _isUploading = false;

  // 任务列表
  final List<String> _imagePathList = [];

  // 上传的keys
  final Map<String, String> _keyMap = {};

  // 上传的服务
  final UploaderTool _uploaderService = UploaderTool();

  void addImagePaths(List<String> imagePaths) {
    if (_isUploading) {
      return;
    }
    _imagePathList.addAll(imagePaths);
  }

  void doUpload() {
    if (_imagePathList.isEmpty) {
      return;
    }

    if (_isUploading) {
      return;
    }

    _isUploading = true;
    // 获取当前上传的图片ImagePath
    String imagePath = _imagePathList[0];

    _uploaderService.uploaderImage(imagePath, completion: (String key) {
      if (key.isNotEmpty) {
        _keyMap[imagePath] = key;
      }

      // 出队列
      _imagePathList.removeAt(0);
      _isUploading = false;

      if (_imagePathList.isNotEmpty) {
        // 不为空的时候
        doUpload();
      } else {
        if (completion != null) {
          completion!(_keyMap);
        }
      }
    }, failure: (ApiHttpError error) {
      cancel();
      if (failure != null) {
        failure!(error);
      }
    });
  }

  void cancel() {
    _isUploading = false;
    _imagePathList.clear();
  }

  void clear() {
    _isUploading = false;
    _imagePathList.clear();
  }
}

四、小结

flutter开发实战-文件上传及上传队列,获取token,上传图片到七牛。

学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-695008.html

到了这里,关于flutter开发实战-文件上传及上传队列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-MethodChannel实现flutter与原生Android双向通信

    flutter开发实战-MethodChannel实现flutter与原生Android双向通信 最近开发中需要原生Android与flutter实现通信,这里使用的MethodChannel MethodChannel:用于传递方法调用(method invocation)。 通道的客户端和宿主端通过传递给通道构造函数的通道名称进行连接 一个应用中所使用的所有通道名称

    2024年02月13日
    浏览(40)
  • uni-app - 移动端(iOS&Android)批量上传文件,支持重传、删除、多选,携带参数,进度监控

    👨‍💻 作者简介:程序员半夏 , 一名全栈程序员,擅长使用各种编程语言和框架,如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我! 🏆 本文收录于专栏: uniapp踩坑指南 🔥 专栏介绍

    2024年02月03日
    浏览(54)
  • flutter开发实战-dio文件下载实现

    flutter开发实战-dio文件下载实现 在开发中,需要下载文件,这里使用的是dio dio 是一个强大的 Dart HTTP 请求库,支持全局配置、Restful API、FormData、拦截器、 请求取消、Cookie 管理、文件上传/下载、超时以及自定义适配器等。 在工程中pubspec.yaml引入dio 我们对dio进行封装 文件下

    2024年02月11日
    浏览(53)
  • flutter开发实战-日志logger写入文件及print

    flutter开发实战-日志logger写入文件及print 在开发中,需要日志logger写入文件,方便日后查看出现的问题。这里记录之前的实现方案。 使用的日志插件是logger 在工程中pubspec.yaml引入logger 使用比较简单,只需创建一个Logger实例并开始日志记录: 也可以传递其他对象,如List、Ma

    2024年02月13日
    浏览(38)
  • flutter开发实战-video_player插件播放抖音直播实现(仅限Android端)

    flutter开发实战-video_player插件播放抖音直播实现(仅限Android端) 在之前的开发过程中,遇到video_player播放视频,通过查看video_player插件描述,可以看到video_player在Android端使用exoplayer,在iOS端使用的是AVPlayer。由于iOS的AVPlayer不支持flv、m3u8格式的直播,这里video_player播放抖音直

    2024年02月05日
    浏览(47)
  • flutter开发实战-打包应用apk签名及Android studio没有generate signed bundle/apk问题修改

    flutter开发实战-打包应用apk签名及Android studio没有generate signed bundle/apk问题修改 最近使用flutter开发项目,需要将打包应用时候apk进行签名,我这边开发使用的是Android studio,发现在Android studio的build没有generate signed bundle/apk。这里记录一下问题修改,以及生产签名文件及gradle配置

    2024年02月08日
    浏览(57)
  • 1、Flutter移动端App实战教程【环境配置、模拟器配置】

    Flutter是Google用以帮助开发者在IOS和Android 两个平台开发高质量原生UI的移动SDK,一份代码可以同时生成IOS和Android两个高性能、高保真的应用程序。 之所以说Flutter能够达到可以媲美甚至超越原生的体验,主要在于其拥有高性能的图形渲染能力,首先对比下Flutter和原生Android及其

    2024年02月09日
    浏览(36)
  • 【Django 网页Web开发】24. 实战项目:moudleForm的文件上传应用到城市管理(17)(保姆级图文)

    欢迎关注 『Django 网页Web开发』 系列,持续更新中 欢迎关注 『Django 网页Web开发』 系列,持续更新中 配置好后就可以在浏览器中访问这个地址。 要记得创建media文件夹 1. 在urls.py中进行配置: 2. 在settings.py中进行配置: 3. 能够通过media的url访问文件 与form的关键区别: 文件存

    2024年02月09日
    浏览(46)
  • Vue实现多个文件上传

    通过vue和element实现多文件上传

    2024年02月16日
    浏览(51)
  • 前端使用FormData上传多个文件

    FormData: 文档介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData 当接口需要文件格式的参数进行文件上传时,前端上传的文件需要使用 FormData FormData主要作用:网络请求中处理用来异步的上传文件 例如: 前端调用方法如下:  页面调用结果如下图  

    2024年02月15日
    浏览(101)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包