[英]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.