在Flutter网站中上传图片

本文介绍了在Flutter网站中上传图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

Flutter Web仍处于技术预览中，但是我想从磁盘中选择一个图像并将其上传到服务器。无论如何，有没有将HTML，JS添加到我的Flutter网站项目中并与其交互？

Flutter web is still in technical preview but i want to pick an image from the disk and upload it to the server. Is there anyway to add HTML, JS to my flutter web project and interact with it?

推荐答案

您需要addEventListener并且还需要附加它以在移动浏览器中将其唤醒。我也在在这里回答。

You need addEventListener and also need to append it for woking it on mobile safari. I answered here too.

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) => completerpleteError(error)); return reader.onLoad.first.then((_) => reader.result as String); }); final results = await Future.wait(resultsFutures); completerplete(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) => completerpleteError(error)); return reader.onLoad.first.then((_) => reader.result as String); }); final results = await Future.wait(resultsFutures); completerplete(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(); }