RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1212728
Accepted
Вячеслав
Вячеслав
Asked:2021-12-02 12:55:54 +0000 UTC2021-12-02 12:55:54 +0000 UTC 2021-12-02 12:55:54 +0000 UTC

如何选择要上传的文件并保存?

  • 772

Flutter Web 应用程序使用 ResumableJS 库将文件上传到服务器。是的,这不是最简单的解决方案,但它是必要的。当您选择一个文件(通常是一个图像)时,您必须在发送它之前在应用程序界面中显示它。但是,我无法在 Flutter 代码中获取图像文件本身,我不明白如何将其从库方法中提取出来并将其转换为任何合适格式的文件。这是我的 index.html 中的代码

<script src="https://cdn.jsdelivr.net/npm/resumablejs@1.1.0/resumable.min.js"></script>
<script>
  var apiUrl = "https://**********/api/";
  var progressBar = 0;
  var photoDescriptionUrl1 = "";
  var photoDescriptionUrl2 = "";
  var photoDescriptionUrl3 = "";
  var photoDescriptionUrl4 = "";
  var photoDescriptionUrl5 = "";
  var photoDescriptionUrl6 = "";
  var productPromoPictureURL = "";
  var productMiniPromoPictureURL = "";
  var productLogoURL = "";
  var nowUploading = [];

  //****** event for uploading **************
  document.addEventListener("uploadFile", function (event) {
    console.log("upload file ---- ", event.detail);
    initResumable(
      event.detail.fieldName,
      event.detail.userId,
      event.detail.fileType
    );
  });

  function initResumable(fieldName, userId, fileType) {
    var uploader = new Resumable({
      target: `${apiUrl}product/upload/${userId}`,
      chunkSize: 0.5 * 1024 * 1024,
      testChunks: false,
      prioritizeFirstAndLastChunk: true,
      maxFiles: 1,
    });
    uploader.opts.fileType = fileType;
    uploader.assignBrowse(document.getElementById(fieldName));

    uploader.on("fileAdded", (file, event) => {
      nowUploading.push(file.uniqueIdentifier);

      console.log("upload now...");
      uploader.upload();

      var event = new CustomEvent("uploadedFile", {
        detail: {
          file: file.file,
        },
      });
      console.log("file---", file);
      document.dispatchEvent(event);
    });

    uploader.on("fileSuccess", (file, message) => {
      console.log("uploaded ok", file, "for", fieldName);
      if (fieldName === "photoDescriptionUrl1R") {
        photoDescriptionUrl1 = file.fileName;
      } else if (fieldName === "photoDescriptionUrl2R") {
        photoDescriptionUrl2 = file.fileName;
      } else if (fieldName === "photoDescriptionUrl3R") {
        photoDescriptionUrl3 = file.fileName;
      } else if (fieldName === "photoDescriptionUrl4R") {
        photoDescriptionUrl4 = file.fileName;
      } else if (fieldName === "photoDescriptionUrl5R") {
        photoDescriptionUrl5 = file.fileName;
      } else if (fieldName === "photoDescriptionUrl6R") {
        photoDescriptionUrl6 = file.fileName;
      } else if (fieldName === "productLogoURL") {
        productLogoURL = file.fileName;
      } else if (fieldName === "productLauncherFileUrl") {
      } else if (fieldName === "productPromoPictureURL") {
        productPromoPictureURL = file.fileName;
      } else if (fieldName === "productLauncherFileUrl") {
      } else if (fieldName === "productMiniPromoPictureURL") {
        productMiniPromoPictureURL = file.fileName;
      } else if (fieldName === "productLauncherFileUrl") {
        this.form.productLauncher.get(fieldName).setValue(file.fileName);
      } else {
        this.form.setValue(file.fileName);
      }
      console.log("file URL is", file.fileName);
      return file.fileName;
    });
    uploader.on("pause", (file, message) => {
      console.log("pause", file, message);
    });
    uploader.on("fileProgress", (file, message) => {
      progressBar = uploader.progress();
      console.log("fileProgress", this.progressBar);
    });
    uploader.on("fileError", (file, message) => {
      console.log("fileError", file, message);
    });
  }
</script>

我想提请您注意,文件下载本身运行良好,没有问题和失败。这就是我在 dart 代码中使用库以获取 fileAdded 事件的方式:

html.document.on["uploadedFile"].listen((html.Event event) {
  var res = (event as html.CustomEvent).detail;
  var res1 = Map.from(res);
  var reet = res1.values.first;

  final reader = html.FileReader();
  reader.readAsText(reet);
  setState(() {
    image = Image.memory(reet);
  });

  print(res1.toString());
});

我的问题是我无法从响应中提取文件并将其转换为小部件所需的格式。给出错误信息

Uncaught Error: Expected a value of type 'Uint8List', but got one of type 'File$

请告诉我,我该怎么做?

javascript
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. MiT
    2021-12-02T23:40:36Z2021-12-02T23:40:36Z

    Image.memory();接受Uint8List(字节)并传输File(文件系统中文件的链接)。从理论上讲,它应该适合您Image.file();,但我不确定收到的File...

    • 0
  2. Best Answer
    Вячеслав
    2021-12-03T11:03:36Z2021-12-03T11:03:36Z

    这是我的解决方案,我确实错误地使用了 FileReader:

    uploadImage() {
        html.document.on["uploadedFile"].listen((html.Event event) async {
          var details = (event as html.CustomEvent).detail;
          var result = Map.from(details);
          print(result);
    
          html.File file = result['file'];
          String _field = result['fieldName'];
    
          if (_field == widget.fieldName) {
            final reader = new html.FileReader();
            reader.readAsArrayBuffer(file);
            await reader.onLoadEnd.first;
    
            var _imageRes = reader.result;
            setState(() {
              image = Image.memory(_imageRes);
            });
          }
        });
      }
    
    • 0

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5