Cordova - 檔案傳輸

此外掛用於上傳和下載檔案。

步驟 1 - 安裝檔案傳輸外掛

我們需要開啟命令提示符並執行以下命令來安裝外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

步驟 2 - 建立按鈕

在本章中，我們將向您展示如何上傳和下載檔案。讓我們在index.html中建立兩個按鈕

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

步驟 3 - 新增事件監聽器

事件監聽器將在index.js中的onDeviceReady函式內建立。我們正在新增點選事件和回撥函式。

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

步驟 4A - 下載函式

此函式將用於從伺服器下載檔案到裝置。我們將檔案上傳到postimage.org以簡化操作。您可能希望使用自己的伺服器。該函式位於index.js中，並在按下相應的按鈕時觸發。uri是伺服器下載連結，fileURI是裝置上 DCIM 資料夾的路徑。

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

按下下載按鈕後，檔案將從postimg.org伺服器下載到我們的移動裝置。我們可以檢查指定資料夾並檢視myFile是否存在。

控制檯輸出將如下所示：

步驟 4B - 上傳函式

現在讓我們建立一個函式來獲取檔案並將其上傳到伺服器。同樣，我們希望儘可能簡化此操作，因此我們將使用posttestserver.com線上伺服器進行測試。uri 值將連結到posttestserver進行釋出。

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

現在我們可以按下上傳按鈕來觸發此函式。我們將獲得控制檯輸出作為上傳成功的確認。

我們還可以檢查伺服器以確保檔案已上傳。