Safari 上的 ngFileUpload 发布空文件

Question

我正在使用 ngFileUpload 将图像发送到 cloudinary 服务，我的应用程序是基于 ionic 构建的，旨在运行 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 下时，它完美地工作并且图像上传到服务器，但是运行在 IOs 我得到一个 "Empty File" 从 cloudinary 返回错误。调试代码，文件似乎已正确创建，我得到的唯一错误是 "Empty file".

到目前为止，我还不能确定真正的问题是 ngFileUpload 还是我创建图像文件的方式。

到目前为止，我已经尝试了这篇文章中描述的步骤，但没有成功 Convert base64 data url to image file in angularjs Convert base64 data image file in angularjs and http://ourcodeworld.com/articles/read/150/how-to-create-an-image-file-from-a-base64-string-on-the-device-with-cordova。

如有任何帮助，我们将不胜感激。

Answer 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;
};

Safari 上的 ngFileUpload 发布空文件

ngFileUpload on safari posts empty file

javascript

angularjs

ionic-framework

ng-file-upload