将图像显示在Angular的UI中后，将图像发送到服务器

我得到一个图片上传，或从一个Angular应用程序的相机：

<button type="button" onclick="userData.store()">send now</button><br> <input type="file" label="add photo" accept="image/*;capture=camera"> 

然后（现在）用这个Javascript处理它：

 var input = document.querySelector('input[type=file]'); var issuediv = document.getElementById('issue'); input.onchange = function () { var file = input.files[0]; displayAsImage(file); }; function displayAsImage(file) { var imgURL = URL.createObjectURL(file), img = document.createElement('img'); img.onload = function() { URL.revokeObjectURL(imgURL); }; img.src = imgURL; issuediv.appendChild(img); } 

两个问题：

1. 这不是Angular代码，是通过JSON处理图像并准备（MySQL）数据库的Angular-ish方式？
2. 上面显示Firefox和Chrome中的图像blob，但iOS和Android浏览器似乎不会附加img标签，只显示一个微小的缩略图。

Answer 1

你可以使用Daniel Afarid的Angular File Upload

调节器

 $scope.selectedFiles = []; $scope.dataUrls = []; $scope.model = 'test model'; $scope.onImageSelect = function($files) { $scope.selectedFiles['image'] = $files[0]; var $file = $files[0]; if (window.FileReader && $file.type.indexOf('image') > -1) { var fileReader = new FileReader(); fileReader.readAsDataURL($files[0]); fileReader.onload = function(e) { $timeout(function() { $scope.dataUrls['image'] = e.target.result; }); } } } $scope.save_image = function(){ $upload.upload({ data:$scope.model, url: 'the/url', file: $scope.selectedFiles['image'] }).then(//success and error callbacks); } 

视图

 <form enctype="multipart/form-data" class="form-horizontal"> <input type="file" ng-file-select="onImageSelect($files)"> <br /> <img ng-show="dataUrls['image']" ng-src="{{dataUrls['image']}}"> <button ng-click="save_image()"></button> </form>