如何上传angularjs中已有的图像

演示

plnkr

行动计划：

>将img / URL转换为Base64格式.
>将Base64数据添加为范围的属性.

采取的步骤：

>创建了一个工厂,使用canvas和promises将URL转换为Base64.
>修改了fileInput指令,使得在图像加载事件时,它会将img转换为Base64并在作用域上分配imgData属性.
>使用imgData属性,将Base64编码的字符串追加到formData

指示

link: function(scope,ele,attrs) {
  ele.bind('load',function(e) {
    var imgSrc = e.target.src;
    urlToBase64.getData(imgSrc).then(function(data) {
      scope.imgData = data;
    });
    scope.$apply();
  });
}

厂

myApp.factory('urlToBase64',['$q',function($q) {

  var obj = {};
  // function to convert URL to Base64 representation
  function URLtoBase64(url,callback) {
    var defer = $q.defer();

    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d');
      canvas.height = this.height;
      canvas.width = this.width;
      ctx.drawImage(this,0);
      try {
        defer.resolve(canvas.toDataURL());
      } catch (e) {
        defer.reject(e);
      }
      canvas = null;
    };
    img.src = url;

    return defer.promise;
  }

  obj.getData = URLtoBase64;
  return obj;
}]);

调节器

var fd = new FormData();
// imgData is coming from fileInput directive
fd.append('file',$scope.imgData);
fd.append('formdata',JSON.stringify($scope.dataform));
var reqObject = {
  url: 'admin/managecuisineAdd',method: 'POST',data: fd,transformRequest: angular.identity,headers: {
    'Content-type': undefined
  }
};
$http(reqObject).then(function(data) {
  $scope.status = data;
  $scope.itemlist.push(data)
  $scope.message = "New Dish Added Successfully"
});