Flutter通过rest api端点上传文件

Question

我有一个 flutter 应用程序，它通过 REST api 与服务器交互，可以获取和显示信息。它还可以向服务器发送文本信息。我想添加将 pdf 文件和图像发送到服务器的功能，但我不知道如何实现。这是选择文件的代码

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Another Attempt'),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.topCenter,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MaterialButton(
              onPressed: () async {
                FilePickerResult result =
                    await FilePicker.platform.pickFiles(allowMultiple: true);

                if (result != null) {
                  List<File> files =
                      result.paths.map((path) => File(path)).toList();
                } else {
                  // User canceled the picker
                }
              },
              child: Text('Upload multiple files'),
              color: Colors.blueAccent,
            ),
            SizedBox(height: 10.0),
            MaterialButton(
              onPressed: () async {
                FilePickerResult result = await FilePicker.platform.pickFiles();

                if (result != null) {
                  File file = File(result.files.single.path);
                } else {
                  // User canceled the picker
                }
              },
              child: Text('Upload single file'),
              color: Colors.blueAccent,
            ),
            SizedBox(height: 10.0),
            MaterialButton(
              onPressed: () {
                _submitData();
              },
              child: Text('Upload single file'),
              color: Colors.blueAccent,
            ),
          ],
        ),
      ),
    );
  }

 void _submitData() async {
    setState(() {});

    var data = {
      'image': file,
      'pdf': files,
     };


    try {
      var res = await Network().postData(data, '/convert-customer');
      var body = json.decode(res.body);
      if (res.statusCode == 200 || res.statusCode == 201) {
        print(res.statusCode);
        print(body);
      } else {}
    } on TimeoutException catch (_) {
      print("Your connection has timedout");
      _formKey.currentState.reset();
    } on SocketException catch (_) {
      print("You are not connected to internet");
      _formKey.currentState.reset();
    }

    setState(() {
      _isLoading = false;
    });
  }

这是向服务器发送数据的代码

  final String _baseUrl = 'http://106.20.34.127/trial/api/v1';

  var token;

  _getToken() async {
    SharedPreferences localStorage = await SharedPreferences.getInstance();
    token = jsonDecode(localStorage.getString('token'))['token'];
  }
  postData(data, apiUrl) async {
    try {
      var _finalUrl = _baseUrl + apiUrl;
      Uri fullUrl = Uri.parse(_finalUrl);
      await _getToken();
      print(fullUrl);
      return await http.post(fullUrl,
          body: jsonEncode(data), headers: _setHeaders());
    } catch (e) {
      print(e);
    }
  }

我该怎么办呢。

Answer 1

对文件使用 http.MultipartRequest 而不是 http.post。通常，POST 请求的正文由文本键值对组成。通过多部分 POST 请求，除了常规文本值之外，您还可以包含具有二进制内容（图像、各种文档等）的文件。

import 'package:http/http.dart' as http;

var req = http.MultipartRequest('POST', Uri.parse(url));

此req对象有一个称为文本值字段的成员Map和一个称为files的列表，您可以向其中添加 MultipartFiles。

整个事情中最重要的元素是 MultipartFile。它可以通过几种方式构建：

1. 默认的MultipartFile(key, stream, length)构造函数，如果您需要从已知长度的字节流创建文件，则可以使用该构造函数。

2. MultipartFile.fromBytes (key, bytes)工厂方法，它附加从字节列表获取的文件。

3. MultipartFile.fromString (key, string)工厂方法，它附加一个包含传递给它的字符串的文本文件。

4. MultipartFile.fromPath (key, path)工厂方法，附加在给定路径中找到的文件。

示例：使用MultipartFile.fromPath()您可以编写如下所示的函数

  (String filename, String url) async {
  var request = http.MultipartRequest('POST', Uri.parse(url));
  request.files.add(
    await http.MultipartFile.fromPath(
      'pdf',
      filename
    )
  );
  var res = await request.send();
}

或者您可以简单地使用pub.dev 上提供的multipart_request插件