從url獲取圖像文件對象

我正在製作一個django-angularjs webapp。用戶可以選擇文件上傳。

我想爲用戶提供一些示例圖片上傳。
因此，如果客戶端選擇它們作爲新鮮上傳，樣品圖像將被服務器發送到客戶端，並再次發送回服務器。
從url獲取圖像文件對象

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>

angularjs控制器：

$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獲取其文件對象的圖像？
like $ scope.myFile = getImageFileObjectFromUrl（url）??

感謝您的幫助

來源

2016-03-08 Gaurav Gupta

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

這是一個總的想法，當你拿到你的圖片網址，只需打個請求作爲arraybuffer的URL，那麼你只需要Blob對象傳遞給你的FORMDATA。

來源

2016-03-08 15:42:35

不工作...數據始終是空arraybuffer。儘管當我刪除響應類型時，我可以看到jpeg數據。 –

您使用哪種版本的角度？ –

您將不得不使用XHR2來創建數組緩衝區，因此可能只需使用原始XMLHttpRequest 2而不是角色的$ http。 –

轉換一個圖像從給定的URL到一個文件對象：

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

來源

2016-03-09 14:32:18

從url獲取圖像文件對象

回答

相關問題