时间戳

首页 > 解决方案 > 将用户上传到 Flutter Web 的图片存储为实际的 .jpg 文件

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

问题描述

我正在使用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文件吗？

谢谢！

标签： flutterfile-uploadflutter-web

解决方案

我的回答基于这篇文章。

基本上，在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;

推荐阅读