capacitor APP下载保存文件和上传文件

npm i cordova-plugin-file

下载（发现只能https下载地址）：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>APP下载保存图片文件</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

</head>

<body>

  <img src="" alt="" id="bot-img">
  <script>

    // 等待全局插件事件：
    document.addEventListener("deviceready", function () {

      // downFile()
      if (!window.localStorage.getItem('fileurl')) {
        //开始下载
        downFile()
      } else {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
          console.log('读取存储的文件：: ');
          fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
            readBinaryFile(fileEntry)
          })
        })
      }

    }, false);


    //》》》读取图片文件
    function readBinaryFile(fileEntry) {
      fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function () {
          //加载成功显示图片
          var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
          displayImage(blob);
        };

        reader.readAsArrayBuffer(file);

      }, onErrorReadFile);
    }
    //显示图片
    function displayImage(blob) {
      var elem = document.getElementById('bot-img');
      elem.src = window.URL.createObjectURL(blob);
    }

    //》》》读取文件
    function readFile(fileEntry) {

      fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function () {
          console.log(">>>>>>>>>>>>>>>>>>Successful file read: " + JSON.stringify(fileEntry) + ' || ' + fileEntry.fullPath + ' || ' + this.result);
          // displayFileData(fileEntry.fullPath + ": " + this.result);
        };

        reader.readAsText(file);

      }, onErrorReadFile);
    }
    //写入文件
    function writeFile(fileEntry, dataObj) {
      // Create a FileWriter object for our FileEntry (log.txt).
      fileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function () {
          console.log("Successful file write...");
          window.localStorage.setItem('fileurl', true);
          // readFile(fileEntry);
          readBinaryFile(fileEntry);
        };

        fileWriter.onerror = function (e) {
          console.log("Failed file write: " + e.toString());
        };

        // If data object is not passed in,
        // create a new Blob instead.
        if (!dataObj) {
          dataObj = new Blob(['some file data'], { type: 'text/plain' });
        }

        fileWriter.write(dataObj);
      });
    }
    function downFile() {
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
        console.log('============================file system open: ' + fs.name);
        fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
          console.log('============================fileEntry is file? ' + fileEntry.isFile.toString());
          var oReq = new XMLHttpRequest();
          // Make sure you add the domain name to the Content-Security-Policy <meta> element.
          oReq.open("GET", "https://cordova.apache.org/static/img/cordova_bot.png", true);
          // Define how you want the XHR data to come back
          oReq.responseType = "blob";
          oReq.onload = function (oEvent) {
            var blob = oReq.response; // Note: not oReq.responseText
            if (blob) {
              // Create a URL based on the blob, and set an <img> tag's src to it.
              // var url = window.URL.createObjectURL(blob);
              // document.getElementById('bot-img').src = url;
              writeFile(fileEntry, blob);

            } else console.error('we didnt get an XHR response!');
          };
          oReq.send(null);
        }, function (err) { console.error('error getting file! ' + err); });
      }, function (err) { console.error('error getting persistent fs! ' + err); });
    }


    function onErrorReadFile(err) {
      console.log('ERROR:' + err);
    }
  </script>

</body>

</html>

上传

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
    console.log('file system open: ' + fs.name);
    fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
        fileEntry.file(function (file) {
            var reader = new FileReader();
            reader.onloadend = function() {
                // Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer
                var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
                var oReq = new XMLHttpRequest();
                oReq.open("POST", "http://mysweeturl.com/upload_handler", true);
                oReq.onload = function (oEvent) {
                    // all done!
                };
                // Pass the blob in to XHR's send method
                oReq.send(blob);
            };
            // Read the file as an ArrayBuffer
            reader.readAsArrayBuffer(file);
        }, function (err) { console.error('error getting fileentry file!' + err); });
    }, function (err) { console.error('error getting file! ' + err); });
}, function (err) { console.error('error getting persistent fs! ' + err); });