Flutter 在flatterweb中上传图像

FlitterWeb仍在技术预览中，但我想从磁盘中选取一个图像并将其上载到服务器。是否有任何方法可以将HTML、JS添加到我的Flatter web项目中并与之交互？

这将满足您的web需求。 只要从任何按钮调用它，它就会打开系统对话框来选择文件

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),
    ),

---

如果您有任何问题，请询问，我会尽力帮助您。

您需要addEventListener，还需要附加它，以便在mobile safari上运行。我回答

Future\u setImage（）异步{
最终完成者=完成者（）；
InputElement uploadInput=FileUploadInputElement（）；
uploadInput.multiple=true；
uploadInput.accept='image/*'；
上传输入。单击（）；
//onChange在mobile safari上不起作用
uploadInput.addEventListener（'change'，（e）异步{
//将文件内容读取为dataURL
最终文件=uploadInput.files；
Iterable resultsFutures=files.map（（文件）{
final reader=FileReader（）；
reader.readAsDataUrl（文件）；
reader.onError.listen（（错误）=>completer.completeError（错误））；
首先返回reader.onLoad.first.then（（）=>reader.result作为字符串）；
});
最终结果=等待未来。等待（结果未来）；
完成者。完成（结果）；
});
//需要附加到移动safari上吗
document.body.append（上传输入）；
最终列表图像=wait completer.future；
设置状态（）{
_上传图像=图像；
});
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();
}

Future\u setImage（）异步{
最终完成者=完成者（）；
最终InputElement输入=document.createElement（“输入”）；
输入
..类型='文件'
…倍数=真
..接受='image/*'；
输入。单击（）；
//onChange在mobile safari上不起作用
addEventListener（'change'，（e）异步{
最终列表文件=input.files；
Iterable resultsFutures=files.map（（文件）{
final reader=FileReader（）；
reader.readAsDataUrl（文件）；
reader.onError.listen（（错误）=>completer.completeError（错误））；
首先返回reader.onLoad.first.then（（）=>reader.result作为字符串）；
});
最终结果=等待未来。等待（结果未来）；
完成者。完成（结果）；
});
//需要附加到移动safari上吗
document.body.append（输入）；
//input.click（）；可以在此处输入
最终列表图像=wait completer.future；
设置状态（）{
_上传图像=图像；
});
input.remove（）；
}

您可以使用 :

---

选择图像（作为小部件、文件或Uint8List）和视频（作为文件或Uint8List）

如何使用它发送文件？这取决于您对发送的理解。是否要与特定于平台的共享操作共享？有一些软件包，你想上传到API吗？然后在那里使用post操作。。。更具体地说，如果我能帮忙，我会的。

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();
}

dependencies:
  image_picker_web: ^1.0.9