[英]Upload base64 image with angular-file-upload
我创建了一个有角度的表单,用户可以在其中使用ng-webcam从网络摄像头拍摄照片,并在拍照后将其保存为示波器上的base64图像。 现在,我尝试使用angular-file-upload上传此文件 。 但是我不太了解它是如何工作的。 项目中的示例从PC上传图像,但是我想设置base64图像并发送它。
我怎样才能做到这一点?
更新
这是我通常从计算机上传图片的方式,我使用名为uploadProfilePicture();
的函数uploadProfilePicture();
所以我想做的是放在我想的请求中,该请求是$scope.uploader
我的$scope.photo
这是我的base64映像。
//This is where I take the image from de webcam
$scope.onCaptureComplete = function(src) {
$scope.photo = src[0];
};
$scope.uploader = new FileUploader({
url: 'api/user/picture'
});
// Called after the user selected a new picture file
$scope.uploader.onAfterAddingFile = function(fileItem) {
if ($window.FileReader) {
var fileReader = new FileReader();
fileReader.readAsDataURL(fileItem._file);
fileReader.onload = function(fileReaderEvent) {
$timeout(function() {
$scope.imageURL = fileReaderEvent.target.result;
// console.log($scope.imageURL);
$scope.localImg = true;
}, 0);
};
}
};
// Called after the user has successfully uploaded a new picture
$scope.uploader.onSuccessItem = function(fileItem, response, status, headers) {
$scope.localImg = false;
// Show success message
$scope.success = true;
// Populate user object
$scope.user = Authentication.user = response;
// Clear upload buttons
$scope.cancelUpload();
};
// Change user profile picture
$scope.uploadProfilePicture = function() {
// Clear messages
$scope.success = $scope.error = null;
// Start upload
$scope.uploader.uploadAll();
};
试试这个对我有用。
视图:
<img ng-src="data:image/jpeg;base64,{{unImage.image}}" class="images" />
<div class="col-md-9 lato size-twelve grey" editable-file="editImage" e-onchange="angular.element(this).scope().uploadFile(this, angular.element(this).scope().allUnits.images)" e-rows="7" e-cols="40" e-name="image" e-form="rowform" e-multiple>
</div>
控制器功能:
$scope.uploadFile = function (input, allUnits) {
allUnits.images = [];
if (input.files && input.files[0]) {
for (var i = 0; i < input.files.length; i++) {
allUnits.images.push(input.files[i]);
}
}
};
var file=image['images'];
Upload.upload({
method: 'POST',
headers: {
'Authorization': 'Bearer ' + window.localStorage.getItem('token')
},
url: baseUrl + '/test/upload-image',
data: {id: data.id, file: file}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.