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

Question

我正在上传图片，或者来自 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 方式是什么？
2. 上面显示了 Firefox 和 Chrome 中的图像块，但 iOS 和 Android 浏览器似乎没有附加 img 标记并且只显示一个很小的缩略图。

Answer 1

你可以使用Daniel Afarid's 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>