Flutter HTTP上传文件使用详解

Flutter HTTP上传文件使用详解FlutterHTTPMultipart-Form使用详解FlutterHTTP上传文件详解multipart/form-dataFlutterHttp插件FlutterHTTP上传文件详解最近使用Flutter开发新App,需要使用Http上传文件,对Flutter中Http上传进行一些总结multipart/form-data一个HTML表单中的enctype有三种类…

Flutter

Flutter HTTP上传文件详解

最近使用Flutter开发新App,需要使用Http上传文件,对Flutter中Http上传进行一些总结

multipart/form-data

一个 HTML 表单中的 enctype 有三种类型

  • application/x-www-urlencoded
  • multipart/form-data
  • text-plain

默认情况下是 application/x-www-urlencoded,当表单使用 POST 请求时,数据会被以 x-www-urlencoded方式编码到 Body 中来传送。

如果要发送大量的二进制数据(non-ASCII),application/x-www-form-urlencoded显然是低效的,因为它需要用 3 个字符来表示一个 non-ASCII 的字符。因此,这种情况下,应该使用multipart/form-data格式。

我们需求中正是需要使用multipart/form-data格式来上传文件。

multipart/form-data请求的内容格式如下:

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyb1zYhTI38xpQxBK

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="city_id"

1

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="company_id"

2
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryyb1zYhTI38xpQxBK--

每个请求的body中可以包含多个字段,如上面的请求中就包含“city_id”、“company_id”、“file”三个字段,前两个字段的值是字符串,“chrome.png”则是上传的文件,文件以二进制数组转换成字符串来传递,如果文件较大,会分为多个POST请求传递给服务器,前面的POST请求会设置为keep-alive,最后一个POST请求才close。

“——WebKitFormBoundaryyb1zYhTI38xpQxBK”是分隔符(boundary),用于分割body中的每个字段,boundary可以自定义,在header中的boundary字段说明,在body中会以如下格式添加进去:

...
Content-Type: multipart/form-data; boundary=${boundary} 

--${boundary}
...
...

--${boundary}--

Flutter Http插件

Flutter中Http请求方式可以直接使用Dart:io中的HttpClient,但是目前不支持multipart/form-data格式,为了方便,我们使用了dart官方封装的http插件

官方文档中介绍了一些简单的使用方法,这里就不再赘述,比较蛋疼的是官方文档中只介绍了一些基础功能的用法,像multipart/form-data的用法都没有介绍。这里主要是介绍一下multipart/form-data的用法。

由于我们的需求是一定要使用multipart/form-data,一开始纠结了好久找不到在Flutter中该如何写代码;网上有人介绍可以使用dio这个库来使用multipart/form-data格式上传文件,但是我们的项目里已经引入了http插件,不想再换成dio,所以还是想最好能够用http插件实现multipart上传功能。

MultipartRequest使用

经过一段时间搜索,终于在http的Github的Issue里找到了一些线索,有人提问关于multipart的问题,我这才发现在http的包里有一个MultipartRequest的类,这个类正是对multipart/form-data格式的实现。

这个类的使用在源码的注释里有简单的说明,具体用法如下:

var uri = Uri.parse("http://pub.dartlang.org/packages/create");
var request = new http.MultipartRequest("POST", uri);
request.fields['user'] = 'nweiz@google.com';
request.files.add(new http.MultipartFile.fromPath(
     'package',
     'build/package.tar.gz',
     contentType: new MediaType('application', 'x-tar'));
var response = await request.send();
if (response.statusCode == 200) print('Uploaded!');

MultipartRequest中,fields是一个Map;files是一个MultipartFile的List:

/// The form fields to send for this request.
final Map<String, String> fields;

/// The private version of [files].
final List<MultipartFile> _files;
/// The list of files to upload for this request.
List<MultipartFile> get files => _files;

fields里存储的key-value就是body中的文本字段,key是name,value是内容。files里存储的就是需要上传的文件,MultipartFile有两个命名构造方法和一个静态方法:

/// Creates a new [MultipartFile] from a byte array.
///
/// [contentType] currently defaults to `application/octet-stream`, but in the
/// future may be inferred from [filename].
factory MultipartFile.fromBytes(String field, List<int> value, {String filename, MediaType contentType})

  /// Creates a new [MultipartFile] from a string.
  ///
  /// The encoding to use when translating [value] into bytes is taken from
  /// [contentType] if it has a charset set. Otherwise, it defaults to UTF-8.
  /// [contentType] currently defaults to `text/plain; charset=utf-8`, but in
  /// the future may be inferred from [filename].
factory MultipartFile.fromString(String field, String value, {String filename, MediaType contentType})


// TODO(nweiz): Infer the content-type from the filename.
/// Creates a new [MultipartFile] from a path to a file on disk.
///
/// [filename] defaults to the basename of [filePath]. [contentType] currently
/// defaults to `application/octet-stream`, but in the future may be inferred
/// from [filename].
///
/// Throws an [UnsupportedError] if `dart:io` isn't supported in this
/// environment.
static Future<MultipartFile> fromPath(String field, String filePath, {String filename, MediaType contentType})

最后调用MultipartRequest中的send方法会将fields和files中的内容按照格式生成body,然后发送POST请求。

需要注意的是request.send()返回的是StreamedResponse,和普通的Response还不一样,需要用如下方法才能读取内容:

var respStr = await response.stream.transform(utf8.decoder).join();
LogUtil.i("upload response is $respStr");

Flutter请求抓包问题

一般做HTTP请求都会想要抓包来看一下请求的格式和内容对不对,但是这次连上代理以后发现其他请求都能抓到,只有Flutter里的请求抓不到…
上网搜索了一下,发现已经有人遇到过这个问题,并给出了解决方案,具体的分析这里就不再贴了,详情请看Flutter中http请求抓包解决方案。这里只写一下结论,增加如下代码就可以抓包了,”http_proxy”填代理PC的IP和端口即可。

var httpClient = new HttpClient();
httpClient.findProxy = (url) {
    return HttpClient.findProxyFromEnvironment(url, environment: {"http_proxy": 'http://192.168.124.7:8888',});
};

但是有一个问题,我们用的是http插件,不是原生的HttpClient,这又应该怎么设置呢?
遇事不决读源码,在http中的client.dart里,我看到这样的注释:

/// Creates a new client.
///
/// Currently this will create an `IOClient` if `dart:io` is available and
/// a `BrowserClient` if `dart:html` is available, otherwise it will throw
/// an unsupported error.

意思是如果有dart:io,就会创建一个IOClient;如果有dart:html,就会创建一个BrowserClient。HttpClient正是dart:io中的一员,所以我们来看看IOClient的实现:

/// The underlying `dart:io` HTTP client.
  HttpClient _inner;

  /// Creates a new HTTP client.
  IOClient([HttpClient inner]) : _inner = inner ?? new HttpClient();

这就很清晰了,IOClient实际就是HttpClient的封装,那我们只要自己创建一个HttpClient设置好代理后再创建IOClient就可以了,所以我们完整的上传代码就是:

  static Future<bool> upload(BaseUploadData data) async {
    var request = await data.getRequest();
    HttpClient httpClient = new HttpClient();
    httpClient.findProxy = (url) {
      return HttpClient.findProxyFromEnvironment(url, environment: {"http_proxy": 'http://10.45.109.70:8088',});
    };
    IOClient client = IOClient(httpClient);
    var response = await client.send(request);
    var respStr = await response.stream.transform(utf8.decoder).join();
    LogUtil.i("upload response is $respStr");
    return response.statusCode == 200;
  }

今天的文章Flutter HTTP上传文件使用详解分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30186.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注