Flutter,webview里面实现上传和下载的功能
前提:Flutter 与 webview(vue) 一起开发的项目
开始的时候并没有想到什么移动端的,所以上传就用input,下载就用iframe来实现,然而真机实测的时候,input那个方法IOS支持但是安卓不支持,下载iframe那个方法则两端都不支持,于是,我们选择使用Flutter来实现.
下载功能.
首先在vue上面写个按钮触发,这里主要是用到Flutter与webview交互的方法,详情参考这里,其实主要就是在点击按钮的时候发个信号给Flutter,触发Flutter里面接收信号里面的代码.由于这里主要说上传下载,所以Flutter与webview之间的交互就略带过吧.
在Flutter里面,我是Dio+openFile来实现的,所以需要安装相关依赖dio | Dart Package 来实现下载和open_file | Flutter Package 来实现打开下载的文件这两个依赖,我是用Dio来实现下载,openfile实现下载完之后打开所下载的文件.直接在接收信号的那个方法里面调用该方法,传入实参就好了
直接贴上代码:
void downloadFile(flowInid, fileName) async{
// 获取存储路径
String url = "http://XXX/download/fileDownload.htm?fileName=${fileName}&flowInid=${flowInid}";
print(url);
var _localPath = (await Path_provider.findLocalPath(context)) + '/Download/';
final savedDir = Directory(_localPath);
// 判断下载路径是否存在
bool hasExisted = await savedDir.exists();
// 不存在就新建路径
if (!hasExisted) {
savedDir.create();
}
Dio dio = new Dio();
//设置连接超时时间
dio.options.connectTimeout = 10000;
//设置数据接收超时时间
dio.options.receiveTimeout = 10000;
Response response = await dio.download(url, savedDir.path+fileName);
if (response.statusCode == 200) {
Navigator.pop(context);
print(savedDir.path+fileName);
String path1 = savedDir.path+fileName;
MyDiaLog.message(context, '下载成功! 存储路径是'+path1);
OpenFile.open(path1);
//下载成功之后显示下载成功
// _controller.evaluateJavascript("uploadAfterFlutter()");
}
上传功能, 在Flutter里面,我这里主要使用 dio | Dart Package 来实现上传功能(详情点击链接看API) 和 file_picker | Flutter Package 来实现调取手机上的文件管理器
_openFileExplorer(flowInid) async {
var fileUrl = await FilePicker.getFile();
//获取路径
setState(() {
this._file = fileUrl;
});
String path = fileUrl.path;
String fileNameShow = path.substring(path.lastIndexOf("/") + 1, path.length); // 文件名this._fileNameShow = fileNameShow;
FormData formData = FormData.from({
//"": "", //这里写其他需要传递的参数this.fileName
"file": UploadFileInfo(this._file, this._fileNameShow),
"flowInid": flowInid,
"fileName": this._fileNameShow
});
var response =
await Dio().post("http://XXXX/upload/ajaxFileUpload.htm", data: formData);
print(response);
if (response.statusCode == 200) {
print('response上传之后展示');
print(response);
_controller.evaluateJavascript("linkFlutter()"); // 上传成功之后调用的JS方法,类似刷新吧
}
}
在上传完之后的最后一个代码是调取使用webview里面的方法,具体也是看webview与Flutter的交互,上传成功是否需要执行webview某个方法视具体情境应用吧.其实在做上传下载功能的时候方法不止这种搭配,还有一个是 flutter_downloader | Flutter Package
也是可以实现的,实现方法有很多种的,具体看自己的项目吧.
Flutter,webview里面实现上传和下载的功能的更多相关文章
- [Android中级]使用Commons-net-ftp来实现FTP上传、下载的功能
本文属于学习分享,如有雷同纯属巧合 利用业余时间.学习一些实用的东西,假设手又有点贱的话.最好还是自己也跟着敲起来. 在android上能够通过自带的ftp组件来完毕各种功能.这次是由于项目中看到用了 ...
- vue+springboot上传和下载附件功能
https://blog.csdn.net/qq_35867245/article/details/84325385 上传附件(服务端代码) 第一步:在application.yml中配置附件要上传的 ...
- linux下实现ftp匿名用户的上传和下载文件功能
1.配置/etc//vsftpd/vsftpd.conf 文件如下: 打开文件,改变如下选项,如果文件中没有该选项,需要自己手动编写该选项 write_enable=YES anonymous_ena ...
- ExtJS+SpringMVC文件上传与下载
说到文件上传.下载功能,网络上大多介绍的是采用JSP.SpringMVC或者Struts等开源框架的功能,通过配置达到文件上传.下载的目地.可是最近项目要用到文件上传与下载的功能,因为本项目框架采用开 ...
- 基于hap的文件上传和下载
序言 现在,绝大部分的应用程序在很多的情况下都需要使用到文件上传与下载的功能,在本文中结合hap利用spirng mvc实现文件的上传和下载,包括上传下载图片.上传下载文档.前端所使用的技术不限,本文 ...
- JavaWeb之文件上传和下载
在如今的互联网时代,人们越来越喜欢将自己的数据存放到互联网上,于是便诞生了很多类型的软件,比如360网盘,百度网盘,云盘之类的.所以说,文件上传和下载的功能是现在非常主流的一个功能,应用十分广泛. 那 ...
- 【php】文件的上传与下载
一. 生活中常见的地方: a) 例如邮箱.空间.文库.百度云.微爱等地方,都可以看到文件的上传和下载的应用,因此,上传和下载的功能非常重要!二. PHP当中的文件上传和下载 a) 我们需要进行一些设置 ...
- 全网最简单的大文件上传与下载代码实现(React+Go)
前言 前段时间我需要实现大文件上传的需求,在网上查找了很多资料,并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能. 我的项目是个比较简单的项目,并没有采用特别复杂的实现方式,所以我这篇文章的目 ...
- win7下利用ftp实现华为路由器的上传和下载
win7下利用ftp实现华为路由器的上传和下载 1. Win7下ftp的安装和配置 (1)开始->控制面板->程序->程序和功能->打开或关闭Windows功能 (2)在Wi ...
随机推荐
- R - Weak Pair HDU - 5877 离散化+权值线段树+dfs序 区间种类数
R - Weak Pair HDU - 5877 离散化+权值线段树 这个题目的初步想法,首先用dfs序建一颗树,然后判断对于每一个节点进行遍历,判断他的子节点和他相乘是不是小于等于k, 这么暴力的算 ...
- Linux时间的相关的操作
时间(修改时区,修改时间,同步网络时间) 查看当前系统时间 date 修改时区 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 修改当前系统时间 ...
- 【FPGA篇章二】FPGA开发流程:详述每一环节的物理含义和实现目标
欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 FPGA的开发流程是遵循着ASIC的开发流程发展的,发展到目前为止,FPGA的开发流程总体按照下图进行,有些步骤可能由于其在当前项目中的条件 ...
- FPGA代码优化方法和准则
- 0804_serial port
其实这个程序总的来说是有问题的 仿真图: MacroAndConst.h #ifndef _MACRO_AND_CONST_H_ #define _MACRO_AND_CONST_H_ typedef ...
- go多种uuid生成方式
package main import ( "fmt" "github.com/chilts/sid" "github.com/kjk/betterg ...
- 关于vue打包后,访问不到页面和访问不到图片。
vue项目完成打包上线的时候很多人都会碰到静态资源找不到,常见的有两个第一种:js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ ...
- java 生成随机字符串
1.生成之指定位数的随机字符串 /** * 随机基数 */ private static char[] charset = {'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h ...
- docker容器与系统时间同步最佳方法
前言:在Docker容器创建好之后,可能会发现容器时间跟宿主机时间不一致,此时需要同步它们的时间,让容器时间跟宿主机时间保持一致. 一.分析时间不一致的原因 宿主机采用了CST时区,CST应该是指(C ...
- 使用Flutter开发的抖音国际版
简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 先上图,个人感觉使用Flutter开发app快得不要不要的额. 两天就基本可以开发个大概出来. 最主要是热更新,太方便实时调整U ...