当我只有 Stream<List<int>> 时，如何使用 Image.memory 在 Flutter Web 中显示图像？数据类型？

编程问答 2022-05-04

问题描述

概述：

我使用 file-picker library 允许用户从他们的设备中选择一个或多个文件。在使用 HTTP/Multipart 将所选文件发送到存储之前，可以预览所选文件。

问题： 文件选择器库返回 List\<PlatformFile>，我可以访问 Uint8List? 或 Stream<List\<int>>?

将 readStream 和 withData 都设置为 True 不会同时返回 Uint8List? 和 Stream<List\<int>>? - 我认为这会有所帮助。

如果我使用 Uint8List?，我可以使用 Flutter Image.memory 方法加载文件，但我无法使用 Uint8List 来使用 http.multipartfile.fromBytes()，因为它只接受 List<int>。

或者，如果我使用 Stream<List<int>>?，我可以使用 http.multipartfile() 并传入 Stream<List\<int>>? 但我不确定如何使用Stream<List\<int>>?

我考虑过但不确定如何完成的事情

1- 有没有办法将 Uint8List? 转换为 List<int>?

2- 是否有使用 Uint8List?

发送文件的替代方法

3- 有没有办法从文件选择器结果中同时接收 Uint8List? 和 Stream<List\<int>>?？

我复制了下面的一些片段，但如果您需要更多信息，请告诉我。提前感谢您的帮助:)

用于选择文件的 Flutter 小部件

Text(
              "Open the File browser",style: TextStyle(
                  color: kPrimaryBlue,fontWeight: FontWeight.bold,fontSize: 20),),onpressed: () async {
              try {
                FilePickerResult? result =
                    await FilePicker.platform.pickFiles(
                  type: FileType.any,allowMultiple: true,withReadStream: false,withData: true,);

                if (result != null) {
                  for (var file in result.files) {
                    files.add(file);
                  }
                } else {
                  print('No Files Were Selected');
                }
              } catch (ex) {
                print(ex);
              }

向端点发送文件的 HTTP 请求：

var uri = uri.parse('https://hookb.in/7ZGKQE8ZDOua99D3RwMD'); var request = http.MultipartRequest('POST',uri);

                  for (var file in files) {
                    request.files.add(http.multipartfile(
                        "files",file.readStream!,file.size!,filename: file.name));
                  }

                  var response = await request.send();
                  if (response.statusCode == 200) {
                    print('Uploaded!');

                    setState(() {
                      files = [];
                    });

提交前显示图像/文件的小部件：

Image(
            image: Image.memory(files[index].bytes);

解决方法

如果我使用 Uint8List？我可以使用 Flutter 加载文件 Image.memory 方法，但我无法使用 Uint8List 来使用 http.MultiPartFile.fromBytes() 因为它只接受一个列表。

这部分不正确。 Uint8List 实现了 List<int> 接口，可以传递给任何需要 List<int> 的函数/构造函数。因此，您可以使用 MultipartFile.fromBytes 构造函数。如果您看到输入错误，很可能是因为您没有将可空类型提升为不可空类型。

MultipartFile.fromBytes('files',file.bytes!)
darthttphttpmultipartfileweb