在UI中以角度显示后向服务器发送图像

I'm getting an image upload, or from the camera in an Angular app:

我正在上传一张图片，或者从相机上的角度应用中:

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

Then (for now) handling it with this Javascript:

然后(现在)用这个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);
}

Two issues:

两个问题:

This isn't Angular code—is what would be an Angular-ish way of handling the image and preparing it for the (MySQL) database via JSON?
这不是有棱角的代码——如何处理图像并通过JSON为(MySQL)数据库做准备?
The above displays the image blob in Firefox and Chrome, but iOS and Android browsers don't appear to append the img tag and display only a tiny thumbnail.
上图显示的是Firefox和Chrome中的图像blob，但iOS和Android浏览器似乎没有添加img标签，只显示一个小缩略图。

1 个解决方案

#1

You could use Daniel Afarid's Angular File Upload

你可以使用Daniel Afarid的角度文件上传。

Controller

控制器

$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);


    }

View

视图

<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>

#1