将用户上传到 Flutter Web 的图片存储为实际的 .jpg 文件

Posted 2023-02-23

【中文标题】将用户上传到 Flutter Web 的图片存储为实际的 .jpg 文件

【英文标题】：Store image uploaded by user into Flutter Web as an actual .jpg file

【发布时间】：2020-12-12 16:59:28

【问题描述】：

我正在使用flutter_web_image_picker 包来允许用户选择 - 然后上传到 Firebase - 一个图像。

但是，该包返回一个 image widget，我可以显示它，但我无法上传到 Firebase。因此，我正在尝试阅读包的代码并对其进行更新以满足我的需求。

总的来说，我认为包的主要功能是：

获取文件

//...
final reader = html.FileReader();
reader.readAsDataUrl(input.files[0]);
await reader.onLoad.first;
final encoded = reader.result as String;

然后它“剥离”它

final stripped = encoded.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');
final imageName = input.files?.first?.name;
//...

最终将其作为小部件返回：

final imageName = imageName;
final imageData = base64.decode(stripped);
return Image.memory(imageData, semanticLabel: imageName);

正如我所说，它运行良好，但是，我需要根据我的需要对其进行调整：

我想将图像作为.jpg 文件获取，以便将其上传到 Firebase。

实际.jpg 文件上方是否有任何变量？我应该执行什么转换来获取.jpg 文件吗？

谢谢！

【问题讨论】：

转换它。有很多包可以做到。

【参考方案1】：

我的回答基于this 帖子。

基本上，在flutter_web_image_picker 包上，在我发布代码之前，有几行可以获得一个实际的html 文件：

final html.FileUploadInputElement input = html.FileUploadInputElement();
input..accept = 'image/*';
input.click();
await input.onChange.first;
if (input.files.isEmpty) return null;

然后使用firebase的pacakge，我上传图片如下：

import 'package:firebase/firebase.dart' as fb;
fb.StorageReference storageRef = fb.storage().ref('myLocation/filename.jpg'); 
fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(input.files[0]).future;
    
Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
return imageUri;