【问题标题】:IONIC: Upload image from Cordova Camera click to CloudinaryIONIC:从 Cordova 相机点击上传图像到 Cloudinary
【发布时间】:2015-09-24 16:57:53
【问题描述】:

尝试了几个小时后,我决定就这个问题向社区寻求帮助。我正在开发一个 Ionic 应用程序,我需要将图像从 Cordova 相机上传到 Cloudinary。现在我们可以通过单击相机中的图像(将图像加载到缓存中)或选择已经保存在图库中的图像来完成。我可以点击图片并从图库中提取它,但我无法将图片二进制文件上传到 Cloudinary。

我尝试通过$cordovaCamera$cordovaFile 以及通过 URL 发送二进制数据,但两种方式都失败了。有什么我遗漏的吗?

这是我为我的相机配置的:

vm.takePicture = function () {
            var options = { 
                quality : 100, 
                destinationType : Camera.DestinationType.DATA_URL, 
                //destinationType: Camera.DestinationType.FILE_URI,
                sourceType : Camera.PictureSourceType.CAMERA, 
                allowEdit : true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                targetHeight: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
                //saveToPhotoAlbum: true
            };

 vm.UploadPicture = function () {
            vm.uploadinProgress = true;
            var options = new FileUploadOptions();
            options.fileKey = "file";
            options.fileName = Image.jpeg;
            options.chunkedMode = false;
            options.trustAllHosts = true;
 $cordovaFile.UploadFile("http://myserver.com/images", vm.imgSrc, options).then(function(result) {
                console.log("Success");
            },function error() {
                console.log('Error: ' + error);
            });
};
    };

【问题讨论】:

    标签: cordova ionic-framework cloudinary


    【解决方案1】:

    我选择将图像直接上传到 cloudinary,从而跳过服务器上传的额外开销。

    这可以通过为移动设备构建的 cloudinary 的“直接上传”功能来实现。您需要在发布请求中设置“upload_preset”参数。

    //选择相机捕捉的设置

     vm.takePicture = function () {
                var options = {
                    quality: 50,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    encodingType: Camera.EncodingType.JPEG,
                };
    

    //画廊图片设置

    vm.selectPicture = function () {
                var options = {
                    quality: 50,
                    allowEdit: false,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                    encodingType: Camera.EncodingType.JPEG
                };
    

    //然后简单的使用IONIC文件传输库

     var ft = new FileTransfer();
     ft.upload(vm.Image, server, win, fail, ftOptions, true);
    

    【讨论】:

    猜你喜欢
    • 2019-04-24
    • 2018-02-14
    • 1970-01-01
    • 2016-12-03
    • 2017-12-01
    • 2020-03-04
    • 2020-03-02
    • 1970-01-01
    • 2021-03-20
    相关资源
    最近更新 更多