Flutter,webview里面实现上传和下载的功能

前提:Flutter 与 webview(vue) 一起开发的项目

开始的时候并没有想到什么移动端的,所以上传就用input,下载就用iframe来实现,然而真机实测的时候,input那个方法IOS支持但是安卓不支持,下载iframe那个方法则两端都不支持,于是,我们选择使用Flutter来实现.

下载功能.

首先在vue上面写个按钮触发,这里主要是用到Flutter与webview交互的方法,详情参考vue触发传信号到Flutter,触发flutter的方法这里和 Flutter调用vue的函数,其实主要就是在点击按钮的时候发个信号给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

也是可以实现的,实现方法有很多种的,具体看自己的项目吧.