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。如何编码角度控制器从这些网址获取文件对象的图像？
喜欢 $ scope.myFile = getImageFileObjectFromUrl（url）??

感谢您的帮助

Answer 1

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

这是一个一般性的想法，当你得到你的图片网址时，只需要将一个请求作为arraybuffer发送到网址，然后你只需要将blob对象传递给你的formdata。

Answer 2

将来自给定网址的图片转换为文件对象：

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

Answer 3

它也可能有帮助

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

从url获取图像文件对象

3 个答案: