Question

所以我设法使用自定义指令通过Angular.js将图像上传到我的服务器。我还设法实现了Cordova的相机功能。现在我正在尝试连接这两个，但是当将图像发送到服务器时，它们被存储为null。我相信问题在于我使用输入字段来获取图像，并且它获得了完整的对象，现在我在拍摄照片并发送之后只获得图像路径。我的问题是，我真的不明白如何将路径转换为Object，如果这是问题？

的index.html

<form class="form-horizontal" role="form">
    <button class="picButton" ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
    <img ng-src="{{lastPhoto}}" style="max-width: 100%">
...
</form>

controllers.js

$scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
        console.log(imageURI);
        $scope.lastPhoto = imageURI;
        $scope.upload(); <-- call to upload the pic
    },
    function(err) {
        console.err(err);
    }, {
        quality: 75,
        targetWidth: 320,
        targetHeight: 320,
        saveToPhotoAlbum: false
    });
};

$scope.upload = function() {
    var url = '';
    var fd = new FormData();

    //previously I had this
    //angular.forEach($scope.files, function(file){
        //fd.append('image',file)
    //});

    fd.append('image', $scope.lastPhoto);

    $http.post(url, fd, {

        transformRequest:angular.identity,
        headers:{'Content-Type':undefined
        }
    })
    .success(function(data, status, headers){
        $scope.imageURL = data.resource_uri; //set it to the response we get
    })
    .error(function(data, status, headers){

    })
}

打印$ scope.lastPhoto时，我得到图像路径： file：///var/mobile/Applications/../tmp/filename.jpg

修改

请求标题：

------WebKitFormBoundaryEzXidt71U741Mc45
Content-Disposition: form-data; name="image"

file:///var/mobile/Applications/C65C8030-33BF-4BBB-B2BB-7ECEC86E87A7/tmp/cdv_photo_015.jpg
------WebKitFormBoundaryEzXidt71U741Mc45--

这会导致问题吗？因为我可以看到我发送路径而不是图像本身..

在更改之前，我使用的是自定义指令，并使用$ scope.files在上传功能中附加到我的请求中：

<input type="file" file-input="files" multiple  onchange="angular.element(this).scope().filesChanged(this);upload();">
<button ng-click="upload()">Upload</button>

Answer 1

我解决了这段代码：

$scope.getPhoto = function() {
    navigator.camera.getPicture(onSuccess, onFail, { quality: 75, targetWidth: 320,
    targetHeight: 320, destinationType: 0 }); 
    //destination type was a base64 encoding
    function onSuccess(imageData) {
        //preview image on img tag
        $('#image-preview').attr('src', "data:image/jpeg;base64,"+imageData);
        //setting scope.lastPhoto 
        $scope.lastPhoto = dataURItoBlob("data:image/jpeg;base64,"+imageData);
    }
    function onFail(message) {
        alert('Failed because: ' + message);
    }
} 
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
 var byteString = atob(dataURI.split(',')[1]);
 var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

 var ab = new ArrayBuffer(byteString.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < byteString.length; i++)
 {
    ia[i] = byteString.charCodeAt(i);
 }

 var bb = new Blob([ab], { "type": mimeString });
 return bb;
}

在此使用后附加到您的formdata：

formData.append('photo', $scope.lastPhoto, $scope.publish.name+'.jpg')

此代码在IOS上运行没有问题。

Answer 2

我认为你的问题在于'Content-Type':undefined。对于图像，您应该使用'Content-Type':'image/jpeg'。

我还会将enctype="multipart/form-data"添加到<form>。

Answer 3

我最终做的是在getPhoto函数的 options 中添加 destinationType：Camera.DestinationType.DATA_URL ，并返回图像的base64表示，然后我将其发送到服务器并存储在TextField（）（Django）中：

$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
    console.log(imageURI);
    $scope.lastPhoto = imageURI;
    $scope.upload(); <-- call to upload the pic
},
function(err) {
    console.err(err);
}, {
    quality: 75,
    targetWidth: 320,
    targetHeight: 320,
    saveToPhotoAlbum: false,
    destinationType: Camera.DestinationType.DATA_URL
});
};

此外，当使用Base64图像进行限制时，请记得调用using：

<img ng-src="data:image/jpeg;base64,{{image}}" />

Ionic-Angular.js拍照＆amp;发送到服务器：空图像

3 个答案: