所以我设法使用自定义指令通过 Angular.js 将图像上传到我的服务器。 我还设法实现了 Cordova 的相机功能。 现在我正在尝试将两者连接起来,但是在将图像发送到服务器时,它们被存储为空。我相信问题在于我使用输入字段来获取图像,并且它正在获取完整的对象,现在我在拍摄并发送图片后得到的只是图像路径。我的问题是,我真的不明白如何将路径转换为对象,如果这是问题所在?
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
编辑
请求 header :
------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>
最佳答案
我用这段代码解决了:
$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.append('photo', $scope.lastPhoto, $scope.publish.name+'.jpg')
这段代码在IOS上运行没有问题。
关于angularjs - Ionic-Angular.js 拍照并发送到服务器 : null images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25141949/