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