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

也是可以實現的,實現方法有很多種的,具體看自己的項目吧.