首页 文章

safari上的ngFileUpload发布空文件

提问于
浏览
1

我使用ngFileUpload将图像发送到cloudinary服务,我的应用程序是基于离子的,并打算在ios和android上运行,我有以下代码上传图像:

.service('photoUploadService', ['$q','Upload', '$ionicLoading', 'AppModel',
	function($q, $upload, $ionicLoading, AppModel){
    // creating a return object with a data property, matching the structure we return from the router resolve
    var ref = this;

    ref.dataURItoBlob = function(dataURI) {
		var contentType = 'image/png';
	  	var sliceSize = 512;

	  	var byteCharacters = atob(dataURI.split(',')[1]);
		  var byteArrays = [];

		  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
		    var slice = byteCharacters.slice(offset, offset + sliceSize);

		    var byteNumbers = new Array(slice.length);
		    for (var i = 0; i < slice.length; i++) {
		      byteNumbers[i] = slice.charCodeAt(i);
		    }

		    var byteArray = new Uint8Array(byteNumbers);

		    byteArrays.push(byteArray);
		  }
		    
		  var blob = new Blob(byteArrays, {type: contentType});
		  return blob;
	};

    ref.uploadPhoto = function(imageData, waitMessage, sucessCallback, sucessCBParameters){
    	var deferred = $q.defer();

    	var filename = Math.floor(Math.random()*90000) + 10000 + ".png";
		//var imageBase64 = finalAd.ad.image.split(',')[1];
		var blob = ref.dataURItoBlob(imageData);//new Blob([imageBase64], {type: 'image/png'});
		var file = new File([blob], filename, {type: 'image/png'});
		
		file.upload = $upload.upload({
			url: "https://api.cloudinary.com/v1_1/xxxxx/upload",
			data: {
				upload_preset: "xxxxx",
				tags: 'myphotoalbum',
				context: 'photo=' + filename,
				file: file
			}
		}).progress(function (e) {
			file.progress = Math.round((e.loaded * 100.0) / e.total);
			file.status = "Uploading... " + file.progress + "%";
			$ionicLoading.show({template: waitMessage + (file.progress) + "%"});
		}).success(function (data, status, headers, config) {
            sucessCBParameters.data = data;
            sucessCallback(sucessCBParameters);
            deferred.resolve(AppModel.ad.ad);
            
        }).error(function (data, status, headers, config) {
        	file.result = data;
        	console.error('PENDING ERROR HANDLER');
        	deferred.reject(data);
        });
        return deferred.promise;
    };
}]);

当我在android下运行我的代码时,它运行完美,并且上传到服务器的图像,但在IO上运行,我从cloudinary返回“空文件”错误 . 调试代码,文件似乎正确创建,我得到的唯一错误是“空文件” .

到目前为止,我还无法确定实际问题是,如果是使用ngFileUpload还是我创建图像领域的方式 .

到目前为止,我已经尝试过这篇文章中描述的步骤,看看没有运气的情况Convert base64 data url to image file in angularjs Convert base64 data image file in angularjshttp://ourcodeworld.com/articles/read/150/how-to-create-an-image-file-from-a-base64-string-on-the-device-with-cordova .

任何帮助,将不胜感激 .

1 回答

  • 1

    对于有此问题的其他人,ng-file-upload不能与cordova一起使用,这里的原始答案是ng-file-upload not uploading in Ionics

    如果其他人需要代码轻松上传图片到cloudinary,这是一个适合我的 .

    ref.uploadPhoto = function(imageData, album, waitMessage, imgType){
        var deferred = $q.defer();
        var filename = Math.floor(Math.random()*90000) + 10000 + ".png";
        var options = {
            fileName: filename,
            chunkedMode: false,
            mimeType: "image/png",
            params: {'upload_preset': "XXXXX",
                    'tags': album,
                    'context': 'photo=' + filename},
    
        };
    
        $cordovaFileTransfer.upload("https://api.cloudinary.com/v1_1/XXXXX/upload",
            imageData, options)
            .then(function(result){
                var response = JSON.parse(result.response);
                response.type = imgType;
                deferred.resolve(response);
            }, function(err){
                console.error(err);
                deferred.reject(err);
            }, function(progress){
                var val = Math.round(((progress.loaded * 100.0) / progress.total));
                console.log(val);
                if(waitMessage){
                    $ionicLoading.show({template: waitMessage + val + "%"});    
                }
            }).catch(function(err){
                console.error(err);
                deferred.reject(err);  
            });
    
        return deferred.promise;
    };
    

相关问题