从 url 获取图像文件对象

Question

我正在制作一个 django-angularjs webapp。 有一个供用户上传文件的选项。

我想为用户提供一些示例图片以供上传。
因此，就像示例图像将由服务器发送到客户端，如果客户端选择它们作为新鲜上传，则再次发送回服务器。

angularjs 指令：

angular.module('users').directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;

    element.bind('change', function(){
        scope.$apply(function(){
            modelSetter(scope, element[0].files[0]);
        });
    });
}
};
}]);

我的html：

<input type="file" file-model="myFile"/><br><br>
<button ng-click="uploadFile()">Upload</button>

angular-js 控制器：

$scope.uploadFile = function(){

    var file = $scope.myFile;
    var uploadUrl = "/multer";
    var fd = new FormData();
    fd.append('file', file);

    $http.post(uploadUrl,fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
      console.log("success!!");
    })
    .error(function(){
      console.log("error!!");
    });
};

使用上面的代码，用户可以从他们的电脑中选择图像并上传它们。

现在，如果我们有服务器发送的示例图像的 url。 如何编码角度控制器以从这些 url 获取文件对象的图像？
像 $scope.myFile=getImageFileObjectFromUrl(url) ??

感谢帮助

Answer 1

也有帮助

  $http.get(url.path, {responseType: "blob"}).then((res) => {
   let fileUrl = (window.URL || window.webkitURL).createObjectURL(res.data);
   resolve({file: fileUrl, type: url.type, name: url.name});
  });

Answer 2

将图像从给定的 url 转换为文件对象：

$http.get(url,{responseType: "blob"}).success((data) => {
  var file = new File([data], "sample.jpg");
  $scope.sampleFile=file;
});

Answer 3

$http.get("image_url", {responseType: "arraybuffer"}).success((data) => {
    fd.append('file', data);
});

这是一个普遍的想法，当您获取图像 url 时，只需将请求作为 arraybuffer 到 URL，然后您只需将 blob 对象传递给您的 formdata。