flutter 使用dio如何上传图片等资源至七牛云

       最近闲来无事又重拾起了flutter之旅(ps: 码农就是这么的贱,没事喜欢找事),哈哈,上述只针对我自己,向广大码农道歉,别给我发律师函哦。
       背景:n年前,初学node的时候搭建了一个漏洞百出的后台接口系统,又不想去重写,只能能用就用,写到一半发现,算了,倔强个什么劲呢,直接用别人现成的接口算了,不是有个大大大佬,把微博用flutter重构了,真的是牛逼至极(ps: 奈何本人没文化,一句牛逼走天下),我也去翻翻我手头的接口,发现还真有。

首先:七牛云的地址是和普通的接口请求是不一样的,所以需要重新new一个新的dio实例,如:

// 上传七牛云服务
class UploadAxios {
  Dio uploadDio;
  UploadAxios() {
    uploadDio = Dio(BaseOptions(
      baseUrl: 'https://up-z2.qiniup.com', // 这里的地址得看你们的七牛云服务器在哪里,一一对应就好了
      connectTimeout: 5000000,
      receiveTimeout: 10000000,
    ));
  }

  // post
  dynamic post(String url, [dynamic params]) async {
    try {
      Response response = await uploadDio.post(url, data: params);
      return response.data;
    } catch (e) {
      return;
    }
  }

  // 并发
  Future<List<dynamic>> all(Iterable<Future> list) async {
    return await Future.wait(list);
  }
}

final UploadAxios uploadAxios = UploadAxios();

所谓遇事不决写dynamic,没有什么是一个dynamic解决不了的问题,如果有那就写一个屏幕。哈哈,这是个坏习惯,如果时间不是很紧急的话,还是要把这些类型都推导表明一下,养成一个良好的习惯,毕竟dart是强类型语言,可不是写js了,anyscript表示,我也可以遇事不决写any。

其次:就开始封装我们的上传资源通用方法了,上传七牛云之前要先通关后台向七牛云获取token,单次token只对单次上传任务有效。

dio单文件上传

单文件上传的话就需要用到Future.wait了,由于我这边接口的特定性,所以采用了单文件上传方式,一般可以用dio文档的多文件上传就可以了。

Future<List<dynamic>> Function(List<String>) uploadQiNiu =
    (List<String> paths) async {
  // 获取上传七牛云token
  final publicsModal.QiNiuTokenResponse tokenR =
      await publics.api.getQiNiuToken();
  if (tokenR.code != 1) return [];
  final List<dynamic> response = await uploadQiNiuFiles(paths, tokenR);
  if (response == null) return [];
  // 构造成可储存的数据结构
  return formatSource(tokenR.data.domain, response);
};
// 并发上传七牛云
Future<List<dynamic>> Function(List<String>, publicsModal.QiNiuTokenResponse)
    uploadQiNiuFiles =
    (List<String> paths, publicsModal.QiNiuTokenResponse tokenR) async {
  return uploadAxios
      .all(paths.map((e) async => uploadQiNiuFile(e, tokenR)).toList());
};
// 单个上传七牛云
Future<dynamic> Function(String, publicsModal.QiNiuTokenResponse)
    uploadQiNiuFile =
    (String path, publicsModal.QiNiuTokenResponse tokenR) async {
  final String token = tokenR.data.token;
  final String basePath = tokenR.data.basePath;
  // 生成随机数文件名
  String name = Random().nextInt(10000).toString() +
      DateTime.now().millisecondsSinceEpoch.toString() +
      path.substring(path.lastIndexOf("."));
  // 构造FormData 
  FormData formData = FormData.fromMap({
    "file": await MultipartFile.fromFile(path, filename: name),
    'token': token, // 上传前,向七牛云获取到的token
    'key': '$basePath$name'
  });
  // 开始上传
  return uploadAxios.post('', formData);
};
上传多个文件

只需要把上面的并发去掉,把file字段改成files就可以了,如:

FormData.fromMap({
    "name": "wendux",
    "age": 25,
    "file": await MultipartFile.fromFile("./text.txt",filename: "upload.txt"),
    "files": [
      await MultipartFile.fromFile("./text1.txt", filename: "text1.txt"),
      await MultipartFile.fromFile("./text2.txt", filename: "text2.txt"),
    ]
 });
response = await dio.post("/info", data: formData);

具体请参考dio文档

好了就是这么的简单,到这里差不多就大功告成了,给自己鼓个掌。
项目地址:传送门

目前实现了一套完整的社交平台的逻辑,项目介绍先写到这里,有其他问题的小伙伴,欢迎评论区留言,知无不言。
                                                                                                                                                   撒花
                                                                                                                                                   完结

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Flutter使用Dio库进行文件上可以通过以下步骤实现: 首先,确保已经在项目的`pubspec.yaml`文件中添加了Dio库的依赖: ```yaml dependencies: dio: ^4.0.0 ``` 然后,在需要上文件的地方引入Dio库: ```dart import 'package:dio/dio.dart'; ``` 接下来,创建一个Dio的实例并配置它: ```dart var dio = Dio(); ``` 然后,使用Dio的`FormData`类来创建一个表单数据对象,并添加需要上的文件: ```dart FormData formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(file.path, filename: 'upload.jpg'), }); ``` 这里的`file`是一个`File`对象,表示需要上的文件。 最后,使用Dio的`post`方法发送请求,并将表单数据作为参数递给它: ```dart Response response = await dio.post( 'https://example.com/upload', data: formData, ); ``` 这里的`https://example.com/upload`是上文件的接口地址,你需要替换为实际的地址。 完整的示例代码如下: ```dart import 'dart:io'; import 'package:dio/dio.dart'; void main() async { var dio = Dio(); File file = File('path/to/file.jpg'); FormData formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(file.path, filename: 'upload.jpg'), }); Response response = await dio.post( 'https://example.com/upload', data: formData, ); print(response.data); } ``` 通过以上步骤,你就可以使用Dio库在Flutter中上文件了。记得根据实际情况修改代码中的文件路径和上接口地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值