ionic开发之用户头像修改-图片选择与上传

用户头像修改，图片选择上传，非常常用的功能，本来打算和wap版一样，也用XMLHttpRequest和FormData来处理图片异步上传，结果在手机上测试的时候发现，onload事件没有触发，没找到原因，本来想省点事才不用插件去实现这个功能的，这下看来只能用插件了。

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