离子-Angular.js拍照和放大器;发送到服务器：空图片 [英] Ionic-Angular.js Taking pictures & sending to server: null images
问题描述
所以，我已经成功地使用自定义指令，上传图片到我的服务器，通过Angular.js。
我也成功地实现了从科尔多瓦相机功能。
现在我尝试连接两个，而是将图片发送到服务器时，他们得到存储为空。我相信问题在于，我是用输入字段来获取图像，它是越来越完整的对象，我拍摄照片并发送后，我现在想起来图像路径。我的问题是，我真的不明白我怎么可以在路径转换为一个对象，如果是这样的问题？
的index.html
＆LT;窗体类=形横角色=形式＆GT;
＆LT;按钮类=picButtonNG点击=getPhoto（）级=按钮按钮按钮块小学＆GT;拍摄照片＆LT; /按钮＆GT;
＆LT; IMG NG-SRC ={{lastPhoto}}的风格=最大宽度：100％＆GT;
...
＆LT; /表及GT;
controllers.js
$ scope.getPhoto =功能（）{
Camera.getPicture（）。然后（功能（imageURI）{
的console.log（imageURI）;
$ scope.lastPhoto = imageURI;
$ scope.upload（）; ＆LT; - 调用上传图片
}，
功能（错误）{
console.err（ERR）;
}，{
品质：75，
targetWidth：320，
targetHeight：320，
saveToPhotoAlbum：假的
}）;
};$ scope.upload =功能（）{
VAR URL ='';
变种FD =新FORMDATA（）; // previously我有这个
//angular.forEach($scope.files，函数（文件）{
//fd.append('image',file）
//}）; fd.append（'形象'，$ scope.lastPhoto）; $ http.post（URL，FD { transformRequest：angular.identity，
标题：{'内容类型'：未定义
}
}）
.success（功能（数据，状态，标题）{
$ scope.imageURL = data.resource_uri; //将它设置为我们得到的回应
}）
.error（功能（数据，状态，标题）{ }）
}
在打印$ scope.lastPhoto我得到的图像路径：文件：///var/mobile/Applications/../tmp/filename.jpg 的
修改
请求报头：
------ WebKitFormBoundaryEzXidt71U741Mc45
内容处置：表格数据; NAME =形象文件：///var/mobile/Applications/C65C8030-33BF-4BBB-B2BB-7ECEC86E87A7/tmp/cdv_photo_015.jpg
------ WebKitFormBoundaryEzXidt71U741Mc45--
如果这导致了问题？因为我可以看到我送的路径，但不是图像本身。
在变化，我使用的是自定义的指令，并使用$ scope.files被追加到我的上传功能要求之前：
＆LT;输入类型=文件的文件输入=文件多重的onchange =angular.element（本）.scope（）filesChanged（本）;上传（） ;＆GT;
＆LT;按钮NG点击=上传（）＆GT;＆上传LT; /按钮＆GT;
我这个code解析：
$ scope.getPhoto =功能（）{
navigator.camera.getPicture（的onSuccess，onFail，{质量：75，targetWidth：320，
targetHeight：320，destinationType：0}）;
//目标类型是base64编码
功能的onSuccess（为imageData）{
在IMG标记// preVIEW图像
$（'＃图像 - preVIEW'）ATTR（'src'中，数据：图像/ JPEG; BASE64，+为imageData）。
//设置scope.lastPhoto
$ scope.lastPhoto = dataURItoBlob（数据：图像/ JPEG; BASE64，+为imageData）;
}
功能onFail（消息）{
警报（'因为失败：'+消息）;
}
}
功能dataURItoBlob（dataURI）{
// base64转换/ URLEn codeD数据组件在一个字符串举行原始二进制数据
变种字节串= ATOB（dataURI.split（，）[1]）;
变种mimeString = dataURI.split（，）[0] .split（：）[1] .split（';'）[0] VAR AB =新ArrayBuffer（byteString.length）;
VAR IA =新Uint8Array（AB）;
对于（VAR I = 0; I＆LT; byteString.length;我++）
{
IA [I] = byteString.char $ C $猫（I）
} VAR BB =新的Blob（[AB]，{类型：mimeString}）;
返回BB;
}
在此之后使用附加到FORMDATA是这样的：
formData.append（'照片'，$ scope.lastPhoto，$ scope.publish.name +。JPG）
在IOS此code运行没有问题。
So I have managed to use a custom directive to upload images to my server, through Angular.js. I have also managed to implement the camera functionality from Cordova. Now I am trying to connect the two, but when sending images to the server, they get stored as null. I believe the problem lies in the fact that I was using an input field to get the image, and it was getting the full Object, and now I am getting just the image path after I take the picture and send it. My problem is, I don't really understand how I could convert the path to an Object, IF that is the problem?
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){
})
}
When printing $scope.lastPhoto I get the image path: file:///var/mobile/Applications/../tmp/filename.jpg
EDIT
Request Headers:
------WebKitFormBoundaryEzXidt71U741Mc45
Content-Disposition: form-data; name="image"
file:///var/mobile/Applications/C65C8030-33BF-4BBB-B2BB-7ECEC86E87A7/tmp/cdv_photo_015.jpg
------WebKitFormBoundaryEzXidt71U741Mc45--
Should this causing the problem? Since I can see I am sending the path but not the image itself..
Before changing, I was using a custom directive, and was using $scope.files to append to my request in the upload function:
<input type="file" file-input="files" multiple onchange="angular.element(this).scope().filesChanged(this);upload();">
<button ng-click="upload()">Upload</button>
I resolve with this code :
$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;
}
after this use append to your formdata like this:
formData.append('photo', $scope.lastPhoto, $scope.publish.name+'.jpg')
This code run on IOS without problem.
这篇关于离子-Angular.js拍照和放大器;发送到服务器：空图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
