[英]Upload image in flutter web
Flutter web 仍处于技术预览阶段,但我想从磁盘中选择一个图像并将其上传到服务器。 无论如何,是否可以将 HTML、JS 添加到我的 flutter web 项目中并与之交互?
您需要 addEventListener 并且还需要附加它以便在移动 safari 上唤醒它。 我也在这里回答。
Future<void> _setImage() async {
final completer = Completer<List<String>>();
InputElement uploadInput = FileUploadInputElement();
uploadInput.multiple = true;
uploadInput.accept = 'image/*';
uploadInput.click();
// onChange doesn't work on mobile safari
uploadInput.addEventListener('change', (e) async {
// read file content as dataURL
final files = uploadInput.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) => reader.result as String);
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
// need to append on mobile safari
document.body.append(uploadInput);
final List<String> images = await completer.future;
setState(() {
_uploadedImages = images;
});
uploadInput.remove();
}
这也有效:
Future<void> _setImage() async {
final completer = Completer<List<String>>();
final InputElement input = document.createElement('input');
input
..type = 'file'
..multiple = true
..accept = 'image/*';
input.click();
// onChange doesn't work on mobile safari
input.addEventListener('change', (e) async {
final List<File> files = input.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) => reader.result as String);
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
// need to append on mobile safari
document.body.append(input);
// input.click(); can be here
final List<String> images = await completer.future;
setState(() {
_uploadedImages = images;
});
input.remove();
}
这将做你想要的网络。 只需从任何按钮调用它,它就会打开系统对话框来选择文件。
import 'dart:typed_data';
import 'package:universal_html/prefer_sdk/html.dart';
import '../../../providers/form_provider.dart';
Uint8List uploadedImage;
startFilePickerWeb(ProviderForm formProvider) async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();
uploadInput.onChange.listen((e) {
// read file content as dataURL
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
FileReader reader = FileReader();
reader.onLoadEnd.listen((e) {
//Here I send the imatge to my Provider
formProvider.setLogoEmpresa(reader.result);
});
reader.onError.listen((fileEvent) {
print("Some Error occured while reading the file");
});
reader.readAsArrayBuffer(file);
}
});
}
提供者:
class ProviderForm extends ChangeNotifier {
Uint8List logoEmpresa;
void setLogoEmpresa(Uint8List newFile) {
logoEmpresa = newFile;
notifyListeners();
}
}
然后在您的视图中,您可以像这样渲染它,以防它显示附件图标:
Container(
width: formProvider.logoEmpresa == null
? 70.0
: 90.0,
child: formProvider.logoEmpresa == null
? Icon(
Icons.attach_file,
size: 70.0,
color: kColorPrincipal,
)
: Image.memory(formProvider.logoEmpresa,
fit: BoxFit.fitWidth),
),
如果您有任何问题,请提出,我会尽力提供帮助。
您可以使用image_picker_web :
dependencies:
image_picker_web: ^1.0.9
选择图像(作为小部件、文件或 Uint8List)和视频(作为文件或 Uint8List)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.