当我只有 Stream<List<int>> 时,如何使用 Image.memory 在 Flutter Web 中显示图像?数据类型?
How do I display an image in a Flutter Web using Image.memory when I only have a Stream<List<int>>? data-type?
概览:
我正在使用 file-picker library 允许用户从他们的设备 select 一个或多个文件。 selected 文件将能够在使用 HTTP/Multipart.
发送 selected 文件进行存储之前进行预览
问题:
文件选择器库 return 是 List\<PlatformFile>
,我可以访问 Uint8List?
或 Stream<List\<int>>?
将 readStream
和 withData
都设置为 True 不会 return 同时 Uint8List?
和 Stream<List\<int>>?
- 我认为这会有所帮助。
如果我使用 Uint8List?
我可以使用 Flutter Image.memory
方法加载文件但是我无法使用 Uint8List
来使用 http.MultiPartFile.fromBytes()
因为它只接受 List<int>
.
或者,如果我使用 Stream<List<int>>?
,我可以使用 http.MultipartFile()
并传入 Stream<List\<int>>?
,但我不确定如何生成 [=] 的预览68=] 使用 Stream<List\<int>>?
我考虑过但不确定如何完成的事情
1- 有没有办法将 Uint8List?
转换为 List<int>?
2- 是否有使用 Uint8List?
发送文件的替代方法
3- 有没有办法从文件选择器结果中同时接收 Uint8List?
和 Stream<List\<int>>?
?
我在下面复制了一些片段,但如果您需要更多信息,请告诉我。提前感谢您的帮助:)
Flutter 小部件到 Select 文件
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/file 的小部件:
Image(
image: Image.memory(files[index].bytes);
If I use the Uint8List? I am able to load the file using the Flutter
Image.memory method but I am am unable to use the Uint8List to use the
http.MultiPartFile.fromBytes() because it only accepts a List.
这部分不正确。 Uint8List
实现了 List<int>
接口,可以传递给任何需要 List<int>
的 functions/constructors。因此,您可以使用 MultipartFile.fromBytes
构造函数。如果您看到输入错误,可能是因为您没有将可空类型提升为不可空类型。
MultipartFile.fromBytes('files', file.bytes!)
概览:
我正在使用 file-picker library 允许用户从他们的设备 select 一个或多个文件。 selected 文件将能够在使用 HTTP/Multipart.
发送 selected 文件进行存储之前进行预览问题:
文件选择器库 return 是 List\<PlatformFile>
,我可以访问 Uint8List?
或 Stream<List\<int>>?
将 readStream
和 withData
都设置为 True 不会 return 同时 Uint8List?
和 Stream<List\<int>>?
- 我认为这会有所帮助。
如果我使用 Uint8List?
我可以使用 Flutter Image.memory
方法加载文件但是我无法使用 Uint8List
来使用 http.MultiPartFile.fromBytes()
因为它只接受 List<int>
.
或者,如果我使用 Stream<List<int>>?
,我可以使用 http.MultipartFile()
并传入 Stream<List\<int>>?
,但我不确定如何生成 [=] 的预览68=] 使用 Stream<List\<int>>?
我考虑过但不确定如何完成的事情
1- 有没有办法将 Uint8List?
转换为 List<int>?
2- 是否有使用 Uint8List?
3- 有没有办法从文件选择器结果中同时接收 Uint8List?
和 Stream<List\<int>>?
?
我在下面复制了一些片段,但如果您需要更多信息,请告诉我。提前感谢您的帮助:)
Flutter 小部件到 Select 文件
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/file 的小部件:
Image(
image: Image.memory(files[index].bytes);
If I use the Uint8List? I am able to load the file using the Flutter Image.memory method but I am am unable to use the Uint8List to use the http.MultiPartFile.fromBytes() because it only accepts a List.
这部分不正确。 Uint8List
实现了 List<int>
接口,可以传递给任何需要 List<int>
的 functions/constructors。因此,您可以使用 MultipartFile.fromBytes
构造函数。如果您看到输入错误,可能是因为您没有将可空类型提升为不可空类型。
MultipartFile.fromBytes('files', file.bytes!)