Flutter 上传带有进度条的大文件。 App 和 Web 都支持

关键词：

【中文标题】Flutter 上传带有进度条的大文件。 App 和 Web 都支持【英文标题】：Flutter upload large file with progress bar. App and Web both support 【发布时间】：2021-06-23 04:49:49 【问题描述】：

我遇到上传大文件的问题。当从应用程序上传文件工作正常但网络挂起时，为 Web 和应用程序（本机）编译的颤振应用程序。如何将大文件作为流请求发送。

我是 Flutter 的新手，正在开发当前现有的应用程序，该应用程序具有上传大型教程视频文件和 PDF 文件的功能。要求是在上传文件的过程中显示进度条，目前应用程序我使用了dio，但它在网页版中挂起，而不是文件不上传操作失败。

文件大小约为 400MB 到 700MB

目前使用以下包

dependencies:
  http: ^0.12.2
  dio: ^3.0.10

你能帮我解决这个问题吗？

我正在尝试使用以下代码来实现，但有些代码无法正常工作。 https://github.com/salk52/Flutter-File-Upload-Download

抛出“内存缓冲区分配失败”之类的错误，由于其他包干扰，我无法更新dio或http的版本。不知何故，我必须使用httpclient 或dio 来实现它。我无法更新包的版本，因为它弄乱了其他包的依赖关系。

示例参考。代码如下： 文件大小约为 500 MB 到 700MB

对于参考。以下代码在代码中使用。

Dio封装示例：

#Dio example start

  Future<NormalResponse> addSubjectMaterial(
      GetSubjectMaterial objSubMat,
      bool isDelete,
      PlatformFile objfile,
      Function sendProgress,
      Function receiveProgress,
      dio.CancelToken cancelToken) async 
    NormalResponse objRes = NormalResponse();
    try 
      print(objSubMat.objMaterial.subjectId);
      dio.FormData formData = dio.FormData();
      formData.fields.add(MapEntry("ObjSubMat", json.encode(objSubMat)));
      formData.fields.add(MapEntry("IsDelete", isDelete.toString()));
      formData.fields
          .add(MapEntry("ClassesId", AppConstants.classesId().toString()));
      if (objfile != null) 
        formData.files.add(
            MapEntry("objfile", await getMultipartFile(objfile, "objfile")));
      
      var resp = await dio.Dio().post(
        AppConstants.addUpdateSubjectMaterial,
        data: formData,
        options: requestConfig,
        cancelToken: cancelToken,
        onSendProgress: sendProgress,
        onReceiveProgress: receiveProgress,
      );

      // String respStr = resp.toString();
      // objRes = NormalResponse.fromJson(json.decode(respStr));
      objRes = NormalResponse.fromJson(resp.data);
     catch (err) 
      objRes.err = err.toString();
      objRes.isSuccess = false;
      objRes.newId = -1;
      sendProgress = null;
      receiveProgress = null;
    
    return objRes;
  

#Dio example end

#httpclient example code is there any solution with progress bar in this sample code.

   Future<NormalResponse> addUpdateSubjectMaterialHttp(
       GetSubjectMaterial objSubMat,
       bool isDelete,
       PlatformFile objfile,
       Function sendProgress,
       Function receiveProgress,
       dio.CancelToken cancelToken) async 
     NormalResponse objRes = NormalResponse();
     try 
       var req = http.MultipartRequest(
         "POST",
         Uri.parse(AppConstants.addUpdateSubjectMaterial),
       );
       req.headers.addAll(
         'Content-type': 'application/json',
         'Accept': 'application/json',
       );
       req.fields['ObjSubMat'] = json.encode(objSubMat);
       req.fields['IsDelete'] = isDelete.toString();
       req.fields['ClassesId'] = AppConstants.classesId().toString();

       if (objfile != null) 
         req.files.add(http.MultipartFile(
             "objFile", objfile.readStream, objfile.size,
             filename: objfile.name));
       

       var resp = await req.send();
       String result = await resp.stream.bytesToString();
       objRes = NormalResponse.fromJson(json.decode(result));
       print(objRes.isSuccess);
       print(objRes.err);
       print("Here done");
      catch (err) 
       print(err);
       throw err;
     
     return objRes;
   
   
#httpclient


Http package example:

#example start

  Future<NormalResponse> addSubjectMaterial(
      GetSubjectMaterial objSubMat,
      bool isDelete,
      PlatformFile objfile,
      Function sendProgress,
      Function receiveProgress,
      dio.CancelToken cancelToken) async 
    NormalResponse objRes = NormalResponse();
    try 
      print(objSubMat.objMaterial.subjectId);
      dio.FormData formData = dio.FormData();
      formData.fields.add(MapEntry("ObjSubMat", json.encode(objSubMat)));
      formData.fields.add(MapEntry("IsDelete", isDelete.toString()));
      formData.fields
          .add(MapEntry("ClassesId", AppConstants.classesId().toString()));
      if (objfile != null) 
        formData.files.add(
            MapEntry("objfile", await getMultipartFile(objfile, "objfile")));
      
      var resp = await dio.Dio().post(
        AppConstants.addUpdateSubjectMaterial,
        data: formData,
        options: requestConfig,
        cancelToken: cancelToken,
        onSendProgress: sendProgress,
        onReceiveProgress: receiveProgress,
      );

      // String respStr = resp.toString();
      // objRes = NormalResponse.fromJson(json.decode(respStr));
      objRes = NormalResponse.fromJson(resp.data);
     catch (err) 
      objRes.err = err.toString();
      objRes.isSuccess = false;
      objRes.newId = -1;
      sendProgress = null;
      receiveProgress = null;
    
    return objRes;
  

#example end

【问题讨论】：

【参考方案1】：

您必须使用 Future、await 和 async，它们在后台线程中继续流的任务，同时您的应用程序的 UI 工作顺利。

【讨论】：

能否提供一些示例代码。 好的@DharmeshChauhan 我正在编辑我的答案，但请回复您使用什么来存储数据，firebase 或其他任何东西或 mysql 您好 Manav，感谢您的回复。我正在使用 API 调用它。在 App 版本中，它也可以与简单的 HTML 页面一起正常工作。 @DharmeshChauhan 当我通读您的代码时，您似乎已经正确地实现了所有的东西。我有一个建议为 web 构建一个版本，然后尝试，因为您正在尝试调试模式。谢谢。

HTML5：带有进度条的 AJAX 文件上传

】HTML5：带有进度条的AJAX文件上传【英文标题】：HTML5:AJAXfileuploadwithprogressbar【发布时间】：2011-11-0602:38:13【问题描述】：我正在寻找一个带有HTML5进度条的文件上传器。我尝试使用其他地方的一些教程，包括SO。ThisSOanswer（被接... 查看详情

Alamofire 上传带有进度的大文件并在应用重启时显示进度

】Alamofire上传带有进度的大文件并在应用重启时显示进度【英文标题】：Alamofireuploadinglargefileswithprogressandshowprogressonapprestart【发布时间】：2018-08-2012:56:17【问题描述】：我已通过以下步骤设置项目。我已启用外部附件通信和后... 查看详情

简单的跨浏览器，带有进度条的 jQuery/PHP 文件上传 [关闭]

】简单的跨浏览器，带有进度条的jQuery/PHP文件上传[关闭]【英文标题】：Simplecross-browser,jQuery/PHPfileuploadwithprogressbar[closed]【发布时间】：2012-05-1516:03:16【问题描述】：我知道有几个关于此的主题，但没有一个为文件上传脚本提供... 查看详情

带进度条的文件上传？

】带进度条的文件上传？【英文标题】：Fileuploaderwithprogressbar?【发布时间】：2011-09-1108:01:12【问题描述】：如何创建带有进度条的HTML/PHP/AJAX文件上传器？我不知道从哪里开始。【问题讨论】：【参考方案1】：我用过Uploadify。易... 查看详情

带有进度条的 jQuery ajax 上传 - 没有 flash

】带有进度条的jQueryajax上传-没有flash【英文标题】：jQueryajaxuploadwithprogressbar-noflash【发布时间】：2011-02-1210:59:54【问题描述】：我正在寻找类似于uploadify的文件上传器，其进度条不依赖于Flash，最好使用jQuery-这可能吗？【问题... 查看详情

使用 Util.copyStream 的带有进度条的 FTP - JAVA

...09-2002:56:11【问题描述】：我正在使用Util.copyStream()通过FTP上传文件。它在进度条上显示进度，但是当我尝试通过FTP客户端（例如FileZilla）查看文件时，它不存在。谁能帮帮我？这是FTPUpload类：packa 查看详情

使用 HTML5 和 Javascript 录制/上传带有进度条的固定长度视频

】使用HTML5和Javascript录制/上传带有进度条的固定长度视频【英文标题】：Record/UploadafixedlengthvideowithprogressbarusingHTML5andJavascript【发布时间】：2021-07-1900:28:24【问题描述】：我正在用HTML和Java脚本制作一个小项目，用户可以在其中... 查看详情

Extjs文件上传进度

】Extjs文件上传进度【英文标题】：Extjsfileuploadprogress【发布时间】：2013-01-0414:16:50【问题描述】：我在ExtJS4中看到过表单文件上传示例，我需要自定义文件上传的进度。我看到了waitMsg配置属性，但我不想使用它，也不想使用extj... 查看详情

springmvc带进度条的多文件上传

1、关于文件上传进度条的实现在说SpringMVC文件上传尤其是带滚动条之前先用servlet做一个简单的文件上传并返回进度信息这样的功能。（1）需要两个包：commons-fileupload-1.3.1.jarcommons-io-1.4.jar上面这两个包是Apache推出的... 查看详情

在 Xamarin Forms 中下载带有进度条的文件

】在XamarinForms中下载带有进度条的文件【英文标题】：DownloadfilewithprogressbarinXamarinForms【发布时间】：2015-08-1813:32:33【问题描述】：我正在尝试使用下载进度条在XamarinForms（PCL，因此WebClient不可用）中创建一个下载页面。我使用... 查看详情

CodeIgniter 上传进度

】CodeIgniter上传进度【英文标题】：CodeIgniterUploadProgress【发布时间】：2013-04-0302:25:19【问题描述】：我正在尝试使用CI2.1.3上传带有进度条的文件。我已经让文件上传一切正常，但是获得这个文件进度并不容易。我查看了大量具... 查看详情

带有 ProgressDialog 和进度条的 AsyncTask

】带有ProgressDialog和进度条的AsyncTask【英文标题】：AsyncTaskwithaProgressDialogandProgressBar【发布时间】：2011-10-1219:14:01【问题描述】：我正在尝试使用AsyncTask加载确定长度的文件。我的AsyncTask看起来像这样：protectedvoidonPreExecute()dialog=... 查看详情

如何使用进度条快速上传大文件？

】如何使用进度条快速上传大文件？【英文标题】：Howtouploadlargefileinexpresswithprogressbar?【发布时间】：2012-10-1201:46:31【问题描述】：目前我正在使用socket.io上传带有进度条的视频。这是教程http://net.tutsplus.com/tutorials/javascript-ajax/h... 查看详情

关于文件上传下载以及其他进度条的实现

现在我的上传，下载，或者某个批量的进度的进度条实现思路都是这样：　　定义一自定义类，列出总数量，完成数（有需求决定可分成功与失败）　　然后访问链接的时候进行处理，将session中存入自定义类，自定义类中存入... 查看详情

Inno Setup - 在自定义页面上复制带有进度条的文件

】InnoSetup-在自定义页面上复制带有进度条的文件【英文标题】：InnoSetup-CopyFileswithProgressBaronacustompage【发布时间】：2020-09-2915:38:43【问题描述】：我目前正在开发一个更新我们公司软件的程序。我让用户在“CreateInputDirPage”中选... 查看详情

使用 Java 上传文件（带进度条）

】使用Java上传文件（带进度条）【英文标题】：FileUploadwithJava(withprogressbar)【发布时间】：2010-09-2006:17:55【问题描述】：我对Java非常陌生，而且我主要是边学边自学，所以我开始构建一个小程序。我想做一个可以从本地磁盘中... 查看详情

文件上传进度条干扰控制器重定向

】文件上传进度条干扰控制器重定向【英文标题】：FileuploadprogressbarinterfereswithControllerredirect【发布时间】：2021-11-1610:23:43【问题描述】：我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰... 查看详情

如何使用 Ktor 和 Kotlin 下载带有进度指示器的大文件？

】如何使用Ktor和Kotlin下载带有进度指示器的大文件？【英文标题】：HowcanIdownloadalargefilewithKtorandKotlinwithaprogressindicator?【发布时间】：2021-03-1221:59:11【问题描述】：我花了太多时间试图解决这个问题。因此，我在下面发布的代码... 查看详情