上传到 Azure blob 存储 Cordova 相机

Question

在我的 Ionic 应用程序中，我使用 Cordova Camera API，当我使用它时，它会返回一个看起来像这样的字符串 blob:http%3A//localhost%3A4400/20e71cfe-267e-46fe-8bd6-44967b8ed433 - 从该字符串中我创建了一个 blob 对象并将其上传到 azure - 问题是 blob 不是我的图像的正确格式......它可以上传，但它不能将其识别为图像。

我认为我需要创建一个文件对象并将其附加到 FormData - 但我不知道该怎么做 - 没有 var the_file = new Blob([imageURI], { type : 'image/jpeg' }); 我无法创建我的 API 需要接受我的图像的 FormData 对象。我也尝试创建新文件，但这也不起作用。

我尝试了一个常规的，我可以上传到天蓝色，所以我知道我的 API 正在工作......但我需要使用 Cordova，因为这是一个 Ionic 应用程序......

我的代码如下 控制器： $scope.getPhoto = function () {

        Camera.getPicture({
            quality: 75,
            targetWidth: 320,
            targetHeight: 320,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            saveToPhotoAlbum: false
        }).then(function (imageURI) {

            var the_file = new Blob([imageURI], { type: 'image/jpeg' });

            $scope.srcImage = imageURI;
            $scope.upload(the_file);
        }, function (err) {
            console.err(err);
        });



    };

$scope.upload = function (file) {
            alert(file);
            BubbleFactory.UploadImage($scope.bubbleId, file).then(function (resp) {
                console.log(resp + $scope.bubbleId);
                $scope.post.Text = resp;
                $scope.PostMessage($scope.post);
                //console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
            }, function (resp) {
                console.log('Error status: ' + resp.status);
            }, function (evt) {
            });
        };

在我的工厂里，我有这个方法可以上传到 Azure

  function postMultipartFormData(uri, file) {
            console.debug('Posting multiplart to : ' + uri + ' data:' + file);
            var fd = new FormData();
            fd.append('file', file);
            //console.log(fd);
            var deferred = $q.defer();
            $http.post(baseUrl + uri, fd, {
                headers: { 'Content-Type': undefined },
                transformRequest: angular.identity
            }).
            success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).
            error(function (data, status, headers, config) {
            });
            return deferred.promise;
        }

我的请求负载在工作时如下所示：

------WebKitFormBoundary0iJ9DFEpiBo5QCmw
Content-Disposition: form-data; name="file"; filename="photo (3).jpg"
Content-Type: image/jpeg


------WebKitFormBoundary0iJ9DFEpiBo5QCmw--

当它不是这样的时候

------WebKitFormBoundaryR4YDBKOi7RZ701i5
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: image/jpeg


------WebKitFormBoundaryR4YDBKOi7RZ701i5--

Blob 对象在 Azure 存储中也始终为 67 字节

我对 Ionic 和 Cordova 应用程序相当陌生 - 我试图寻找答案，但我真的不明白如何将正确格式的简单图像上传到 Azure...

Answer 1

更改后我使用 $cordovaFileTransfer.upload 而不是常规上传，效果很好！

    function postMultipartFormData(apiUrl, imageUrl, options) {
    console.debug('Posting multiplart to : ' + apiUrl + ' data:' + options);

    var deferred = $q.defer();

    $cordovaFileTransfer.upload(apiUrl, imageUrl, {})
      .then(function(result) {
        // Success!
        deferred.resolve(result);
      }, function(err) {
        // Error
      }, function (progress) {
        // constant progress updates
    });

    return deferred.promise;
}

控制器

$cordovaCamera.getPicture(camOptions).then(function (imageUrl) {
            console.log(imageUrl);
            /* iOS saves image files taken from the camera to a temporary location which can be deleted by the ios later. imageUrl points to that temporary location. We should move the image file from this temporary location to a permanent location within the app on the device. This can be done using cordova file api (File plugin). However, this task is out of the scope of this demo.      
            */

            //Display the image on screen
            $scope.srcImage = imageUrl;

            var options = {};

            $scope.upload(imageUrl, options);
        }, function (err) {
            // error
            console.warn(err);

        });

    $scope.upload = function (imageUrl, options) {
    alert(options);
    $ionicLoading.show({
           template: '<ion-spinner class="spinner-energized"></ion-spinner><br/>Uploading ...',
           duration: 20000 //Dismiss after 20 seconds
    });

    BubbleService.UploadImage(imageUrl, options).then(function (resp) {
        $ionicLoading.hide();
        console.log(resp);
    }, function (resp) {
        $ionicLoading.hide();
        console.log('Error status: ' + resp.status);
    }, function (evt) {

    });
};