ionic 图片上传Demo

最新推荐文章于 2019-12-23 00:02:34 发布

幸福的雏

最新推荐文章于 2019-12-23 00:02:34 发布

阅读量6.5k

点赞数 2

分类专栏： ionic 文章标签： ionic 图片图片上传 cordovaCamare cordovaFileTransfer

本文链接：https://blog.csdn.net/haozhoupan/article/details/49814631

版权

ionic 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ionic 图片上传Demo

第1步安装插件

1.1安装cordovaCamera

说明：这个插件是用来拍照，或者说是打开手机上面的照相机功能的

操作：打开DOS，进入ionic项目所在的目录，

输入命令：cordova plugin add cordova-plugin-camera，等待安装完毕后，去plugins目录下查看如果有cordova-plugin-camera这个文件夹，表示安装成功。

PS：还可以输入以下两个命令进行安装，不过这是老版本的安装方法

1.cordova plugin add org.apache.cordova.camera

2.cordova plugin add https://github.com/apache/cordova-plugin-camera.git

1.2安装cordovaFileTransfer

说明：这个插件是用来上传文件使用的

操作：打开DOS，进入ionic项目所在的目录，

输入命令：cordova plugin add cordova-plugin-file-transfer，等待安装完毕后，去plugins目录下查看如果有cordova-plugin-file-transfer这个文件夹，表示安装成功

第2步编写页面

第3步编写JS

3.1在controller中注入相关服务

$ionicActionSheet

$cordovaCamera

$cordovaFileTransfer

3.2编写下面JS

// 添加图片
$scope.addPhoto = function () {
    $ionicActionSheet.show({
        cancelOnStateChange: true,
        cssClass: 'action_s',
        titleText: "请选择获取图片方式",
        buttons: [
            {text: '相机'},
            {text: '图库'}
        ],
        cancelText: '取消',
        cancel: function () {
            return true;
        },
        buttonClicked: function (index) {

            switch (index) {
                case 0:
                    $scope.takePhoto();
                    break;
                case 1:
                    $scope.pickImage();
                    break;
                default:
                    break;
            }
            return true;
        }
    });
};

//拍照
$scope.takePhoto = function () {
    var options = {
        quality: 100,
        destinationType: Camera.DestinationType.FILE_URI,//Choose the format of the return value.
        sourceType: Camera.PictureSourceType.CAMERA,//资源类型：CAMERA打开系统照相机；PHOTOLIBRARY打开系统图库
        targetWidth: 150,//头像宽度
        targetHeight: 150//头像高度

    };

    $cordovaCamera.getPicture(options)
        .then(function (imageURI) {
            //Success
            $scope.imageSrc = imageURI;
            $scope.uploadPhoto();
        }, function (err) {
            // Error
        });
};
//选择照片
$scope.pickImage = function () {
    var options = {
        quality: 100,
        destinationType: Camera.DestinationType.FILE_URI,//Choose the format of the return value.
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,//资源类型：CAMERA打开系统照相机；PHOTOLIBRARY打开系统图库
        targetWidth: 150,//头像宽度
        targetHeight: 150//头像高度
    };

    $cordovaCamera.getPicture(options)
        .then(function (imageURI) {
            //Success
            $scope.imageSrc = imageURI;
            $scope.uploadPhoto();
        }, function (err) {
            // Error
        });
};

$scope.uploadPhoto = function () {
    var requestParams = "?callback=JSON_CALLBACK";

    var server = encodeURI('注意这写的是你的后台请求地址' + requestParams);
    var fileURL = $scope.imageSrc;
    var options = {
        fileKey: "file",//相当于form表单项的name属性
        fileName: fileURL.substr(fileURL.lastIndexOf('/') + 1),
        mimeType: "image/jpeg"
    };

    $cordovaFileTransfer.upload(server, fileURL, options)
        .then(function (result) {
            // Success!
            alert("Code = " + result.responseCode + "Response = " + result.response+ "Sent = " + result.bytesSent);
        }, function (err) {
            // Error
             alert("An error has occurred: Code = " + error.code + "upload error source " + error.source + "upload error target " + error.target);
        }, function (progress) {
            // constant progress updates
        });

};