ionic開發之使用者頭像修改-圖片選擇與上傳
準備
首先，這裡需要用到Camera、File、File Transfer這3個外掛。怎麼安裝自己看官網咖，很容易。
第一步
修改頭像的第一步，當然是點選當前介面的頭像圖片或者其他什麼地方，然後彈出一個框，讓使用者選擇是從相簿選擇圖片還是拍照。
$scope.selectImg = function() {
var hideSheet = $ionicActionSheet.show({
buttons: [{
text: '相簿'
}, {
text: '拍照'
}
],
titleText: '選擇圖片',
cancelText: '取消',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
navigator.camera.getPicture(cameraSuccess, cameraError, {
sourceType: index
}); //呼叫系統相簿、拍照
}
});
}
這裡用了ionic的actionsheet，在使用者點選按鈕的時候，改變sourceType的值，這個引數的作用是決定系統是開啟相簿還是拍照，剛好0是相簿，1是拍照，所以直接sourceType=index，其他的引數看官網說明
在這裡，我們還傳遞了cameraSuccess和cameraError 兩個引數，分別是選擇照片成功和失敗的回撥函式。
第二步
在第一步選擇照片成功後，我們就需要在回撥函式cameraSuccess中處理選擇的圖片檔案，然後上傳到伺服器。
function cameraSuccess(img)
{
$scope.img = img;//這裡返回的img是選擇的圖片的地址，可以直接賦給img標籤的src，就能顯示了
window.resolveLocalFileSystemURL(img, function success(fileEntry) {
upload(fileEntry.toInternalURL());//將獲取的檔案地址轉換成file transfer外掛需要的絕對地址
}, function() {
alert("上傳失敗");
});
}
function cameraError(img) {
alert("上傳失敗");
}
function upload(fileURL) {//上傳圖片
var win = function(r) {//成功回撥方法
var response = JSON.parse(r.response);//你的上傳介面返回的資料
if(response.datas.state){
alert("修改成功");
}else {
alert(response.datas.error);
}
}
var fail = function(error) {//失敗回撥方法
alert("上傳失敗");
}
var options = new FileUploadOptions();
options.fileKey = "pic";//這是你的上傳介面的檔案標識，伺服器通過這個標識獲取檔案
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "image/gif";//圖片
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI('uploadurl'), win, fail, options);//開始上傳，uoloadurl是你的上傳介面地址
}
最後
以上是我的圖片選擇上傳方法，測試過可用，其他型別的檔案上傳也是同理，想要加上進度顯示的話，檢視官網File Transfer外掛的使用。
在安裝了以上外掛後，驚奇的發現，直接使用之前的非同步上傳方案，竟然也可以了。。。。好吧，也許就是因為少了其中了某個外掛導致之前使用不成功吧。總之，使用以上的方案唯一的好處是多了個拍照的功能