上传图像与离子+ cloudinary
我想从后台存储设备上传图片。 我认为使用cloudinary更有吸引力。 但是，我不知道如何使用这个框架与离子。 你不能给我一个简单的例子吗？
我已经添加了我的Utils.js服务：
(function () {
function ius($q, $ionicLoading, $cordovaFile, $translate ) { //CLOUDINARY_CONFIGS
var service = {};
service.uploadImage = uploadImage;
return service;
function uploadImage(imageURI) {
var deferred = $q.defer();
var fileSize;
var percentage;
// Find out how big the original file is
window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
fileEntry.file(function (fileObj) {
fileSize = fileObj.size;
// Display a loading indicator reporting the start of the upload
$ionicLoading.show({ template: 'Uploading Picture : ' + 0 + '%' });
// Trigger the upload
uploadFile();
});
});
function uploadFile() {
// Add the Cloudinary "upload preset" name to the headers
var uploadOptions = {
params: { 'upload_preset': CLOUDINARY_CONFIGS.UPLOAD_PRESET } //CLOUDINARY_CONFIGS.UPLOAD_PRESET
};
$cordovaFile
// Your Cloudinary URL will go here
.uploadFile(CLOUDINARY_CONFIGS.API_URL, imageURI, uploadOptions) //
.then(function (result) {
// Let the user know the upload is completed
$ionicLoading.show({ template: 'Upload Completed', duration: 1000 });
// Result has a "response" property that is escaped
// FYI: The result will also have URLs for any new images generated with
// eager transformations
var response = JSON.parse(decodeURIComponent(result.response));
deferred.resolve(response);
}, function (err) {
// Uh oh!
$ionicLoading.show({ template: 'Upload Failed', duration: 3000 });
deferred.reject(err);
}, function (progress) {
// The upload plugin gives you information about how much data has been transferred
// on some interval. Use this with the original file size to show a progress indicator.
percentage = Math.floor(progress.loaded / fileSize * 100);
$ionicLoading.show({ template: 'Uploading Picture : ' + percentage + '%' });
});
}
return deferred.promise;
}
}
angular.module('App').factory('ImageUploadService', ius);
})();发现了我自己摆弄的简单解决方案。 非常非常简单的解决方案直接在控制器中，您可以根据需要轻松适应服务。 只需添加cordova文件传输插件和：
var server = 'https://api.cloudinary.com/v1_1/<cloudinary-name>/image/upload';
//must be included for cloudinary unsigned upload
var options = {
'params': {
'upload_preset': '<preset-name>'
}
};
$cordovaFileTransfer.upload(server, $scope.imgURI, options)
.then(function(result) {
var response = JSON.parse(result.response);
//this is your image source https url
$scope.image_src = JSON.stringify(response.secure_url);
}, function(err) {
console.log(JSON.stringify(err));
// Error print
}, function (progress) {
//progress update
});
完成。
函数imageUpload（）{document.addEventListener（“deviceready”，function（）{
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
var Profile =imageURI;
var server = 'https://api.cloudinary.com/v1_1/<cloudinary-name>/image/upload';
//must be included for cloudinary unsigned upload
var options = {
'params': {
'upload_preset': '<preset-name>'
}
};
$cordovaFileTransfer.upload(server,Profile, options)
.then(function(result) {
var response = JSON.parse(result.response);
//this is your image source https url
vm.Profile =response.secure_url;
}, function(err) {
console.log(JSON.stringify(err));
// Error print
}, function (progress) {
//progress update
});
}, function(err) {
// error
});
}, false);
}
链接地址: http://www.djcxy.com/p/77637.html