准备
首先，这里需要用到 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插件的使用。
在安装了以上插件后，惊奇的发现，直接使用之前的异步上传方案，竟然也可以了。。。。好吧，也许就是因为少了其中了某个插件导致之前使用不成功吧。总之，使用以上的方案唯一的好处是多了个拍照的功能
