cordova filetransfer外掛——上傳、下載檔案
阿新 • • 發佈：2019-02-18
介紹
FileTransfer物件提供給了一種將檔案上傳到伺服器的方法，可以通過HTTP和HTTPS進行請求，可以傳遞一個由FileUploadOptions物件設定的可選引數給upload方法。上傳成功後，系統會呼叫成功回撥函式並傳遞一個FileUploadResult物件。如果出現錯誤，那麼系統會呼叫錯誤回撥函式並傳遞一個FileTransferError物件。
安裝
cordova plugin add cordova-plugin-file-transfer
支援的平臺
· Amazon Fire OS
· Android
· BlackBerry 10
· Browser
· Firefox OS**
· iOS
· Windows Phone 7 and 8*
· Windows
使用方法
這個外掛定義了全域性的FileTransfer，FileUploadOptions 建構函式。雖然在全域性範圍內，但是他們需要在deviceready事件之後才可用
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(FileTransfer);
}屬性
onprogress： 使用呼叫 `ProgressEvent`
方法
upload： 將檔案傳送到伺服器。
download： 從伺服器下載一個文件。
abort: 中止正在進行的傳輸。
示例
示例一：上傳圖片
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>Hello World</title> <style> .line { padding: 5px; } #myImage { height: 200px; } </style> </head> <body> <div class="app"> <div class="line"><button id="openLabrary">按鈕</button></div> <div class="line"><img id="myImage"></img></div> <div class="line"><span id="text"></span></div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
index.js：
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
this.receivedEvent();
},
$$: function(id) {
return document.getElementById(id);
},
receivedEvent: function(){
var getDomLabrary = this.$$('openLabrary');
var _this = this;
getDomLabrary.onclick = function(){
// 開啟圖片庫
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50, // 相片質量是50
sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM, // 設定從圖片庫獲取
destinationType: Camera.DestinationType.FILE_URI // 以檔案路徑返回
});
function onSuccess(imageURI) {
console.log(imageURI)
_this.$$('myImage').src = imageURI;
// 上傳
_this.upload(imageURI);
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
},
//使用FileTransfer外掛，上傳檔案
upload(fileURL) {
//上傳成功
var success = function (r) {
alert("上傳成功! Code = " + r.responseCode);
}
//上傳失敗
var fail = function (error) {
alert("上傳失敗! Code = " + error.code);
}
var options = new FileUploadOptions();
options.fileKey = "file1";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
//options.mimeType = "text/plain";
//上傳引數
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
//上傳地址
var SERVER = "http://10.1.10.53:8089/oss/UploadServlet"
ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
}
};
app.initialize();執行：
點選按鈕，開啟圖片庫，選擇圖片，顯示
上傳成功
備註：
這個上傳的伺服器路徑：
var SERVER = "http://10.1.10.53:8089/oss/UploadServlet"
使用了一個.jsp檔案寫成的
示例二：下載圖片
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<style>
.line {
padding: 5px;
}
#myImage {
height: 200px;
}
</style>
</head>
<body>
<div class="app">
<div class="line"><button id="download">下載</button></div>
<div class="line"><img id="myImage"></img></div>
<div class="line"><span id="text"></span></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>index.js：
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function() {
this.receivedEvent();
},
// get DOM
$$: function(id) {
return document.getElementById(id);
},
receivedEvent:function() {
var _this = this;
var dlDom = this.$$('download');
dlDom.onclick = function() {
_this.createFilePath();
}
},
// 建立檔案路徑
createFilePath: function() {
var _this = this;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
fs.root.getFile("downloadedImage.png", { create: true, exclusive: false }, function (fileEntry) {
console.log(fileEntry);
//呼叫fileTransfer外掛，下載圖片
_this.downLoadImg(fileEntry.nativeURL);
}, function(err) {
console.log(err);
});
}, function(error) {
console.log(error);
});
},
// fileTransfer plugin
downLoadImg: function(fileURL) {
var _this = this;
// 初始化FileTransfer物件
var fileTransfer = new FileTransfer();
// 伺服器下載地址
var uri = encodeURI("http://avatar.csdn.net/7/E/0/1_michael_ouyang.jpg");
// 呼叫download方法
fileTransfer.download(
uri, //uri網路下載路徑
fileURL, //url本地儲存路徑
function(entry) {
console.log("download complete: " + entry.toURL());
_this.$$('myImage').src = entry.toURL();
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
}
);
}
};
app.initialize();執行：
點選按鈕，下載圖片
圖片下載成功後，顯示在頁面上
備註：
控制檯輸出的fileEntry物件的內容
拿到這個圖片在手機系統的路徑
file:///data/user/0/com.abc.www/files/files/downloadedImage.png
現在開啟手機的檔案管理器，是找不到該圖片的
因為我們沒有設定持久化檔案的儲存路徑，預設會儲存在data裡面
那麼在config.xml中加上這一句程式碼
<preference name="AndroidPersistentFileLocation"value="Compatibility"/>
再啟動應用下載圖片，fileEntry物件的nativeURL變成了storage
file:///storage/emulated/0/downloadedImage.png
開啟手機的檔案管理器，檢視下載回來的圖片
