Flutter上传、显示二进制图像的一些事

IT晴天

发布于 2020-02-13 13:00:30

3.3K0

发布于 2020-02-13 13:00:30

文章被收录于专栏：ionic3+ionic3+

一. 二进制流图像的显示

前端图像的展示，我们最常用的是给定一个图像地址，然后它就会自己加载并显示，如这样的代码：

<img src='图像地址'/>

这基本是一种数据的Get请求，对于像Post之类的请求方式，上述方式就不好用了，这个时候可以列用数据流或二进制方式处理，在Flutter可以像下面文章处理：

flutter通过dio读取二进制数据，比如通过api接口读取图片

但是此文的方法已经过期了，我调整了一下（里面有额外获取Headers的代码，可去掉）

  ///
  /// 获取图片
  static Future getImage(String url) async {
    Dio dio = Dio();
    // 注意：这里使用bytes
    dio.options.responseType = ResponseType.bytes;
    // 如果headers有东西，则添加
    Map<String, dynamic> headers = Map();
    dio.options.headers = headers;
    try {
      Response response = await dio.post(url);
      String codeId = '';
      // 获取response的headers信息，如果业务不需要可以去掉
      final List<String> imageCode = response.headers["code-id"];
      if (imageCode != null && imageCode.length > 0) {
        codeId = imageCode[0];
      }
      final Uint8List bytes = consolidateHttpClientResponseBytes(response.data);
      print("获取图像成功");
      print(codeId);
      return ImageCodeModel(codeId, bytes);
    } catch (e) {
      print("网络错误：" + e.toString());
      return await null;
    }
  }

  static consolidateHttpClientResponseBytes(data) {
    // response.contentLength is not trustworthy when GZIP is involved
    // or other cases where an intermediate transformer has been applied
    // to the stream.
    final List<List<int>> chunks = <List<int>>[];
    int contentLength = 0;
    chunks.add(data);
    contentLength += data.length;
    final Uint8List bytes = Uint8List(contentLength);
    int offset = 0;
    for (List<int> chunk in chunks) {
      bytes.setRange(offset, offset + chunk.length, chunk);
      offset += chunk.length;
    }
    return bytes;
  }

二. 图像的上传

对于图像的上传，网上一些文章是这样写的：

  void upload(String url, File file) {
    print(file.path);
    Dio dio = Dio();
    dio.post(url, data: FormData.from({'file': file}))
    ...

这种方式其实对于新版的Flutter和Dio也已经不适用了，而是应如下方式调用：

  static const TIME_OUT = 60000;
  static const CONTENT_TYPE_JSON = "application/json";
  static const CONTENT_TYPE_FORM = "application/x-www-form-urlencoded";
  ///
  ///上传文件
  static Future uploadFile(String url, File file) async {
    String path = file.path;
    var fileData = await MultipartFile.fromFile(
      path
    );
    FormData formData = FormData.fromMap({
      "file": fileData,
    });
    Options options = new Options(method: "POST");
    ///超时
    options.receiveTimeout = TIME_OUT;
    Map<String, String> headers = new HashMap();
    headers[Config.tokenName] = SPService.getToken();
    headers[HttpHeaders.contentTypeHeader] = CONTENT_TYPE_FORM;
    headers[HttpHeaders.acceptHeader] = CONTENT_TYPE_JSON;
    options.headers = headers;
    return request(url, formData, options: options);
  }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

flutter