簡體   English   中英

使用JS / Angular從URL檢索圖像文件

[英]Retrieve image file from url using JS / Angular

我正在使用MongooseJS作為數據模型的橋梁,將數據從wordpress環境導出到MongoDB。 我有一個包含所有必需信息的每個對象的JSON。

例如,我有一個用戶項目,其中包含一個指向WordPress服務器url的avatarpath字段:(例如: http://url/wp-content/upload/img/avatar.jpg

我要執行的操作是從URL中檢索圖像,將其上傳到我的新存儲文件夾,檢索新路徑,並將新對象存儲在mongodb中。

我的問題是,我無法設法找到一種從http get或任何其他方式獲取文件數據的方法。 通常,我在html中有一個文件輸入,然后從該輸入的文件對象開始。 我應該如何進行這項工作? 我走錯了方向嗎?

我找到了這個答案,但似乎已被棄用: 如何使用FileReader API從url上傳圖像文件?

這是我現在所擁有的:

$scope.curateurs_data = {};
$scope.curateurs = [];

  $http.get('resources/json_curateurs.json').success(function(data) {
    $scope.curateurs_data = data;
    console.log(data[0]);
    $scope.getPics();
  });

  //RETRIEVE IMAGE DATA
  $scope.getPics = function(data){
    console.log("RETRIEVING PICTURE")

    var uploadPlace = '/upload/user';
    var images;

    angular.forEach($scope.curateurs_data, function(item, key) {
      $scope.curitem = item;
      console.log($scope.curitem);

      $http.get(item.avatarpath, {responseType: "arraybuffer"}).success(function(data){

        var arrayBufferView = new Uint8Array( data );
        var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL( blob );

        console.log(imageUrl);
        console.log(blob);

        images = blob;

        var pic = {
          images: images
        };

        Upload.upload({
          url: uploadPlace,
          arrayKey: '',
          data: pic,
        }).then(function(response) {
          // Adding data paths to formData object before creating mood
          // MUST respect images array order
          $scope.curitem.avatarpath = response.data.files[0].path;
          console.log(response.data.files[0].path);
        });

      }).error(function(err, status){})  

      $scope.curateurs.push($scope.curitem);

    });
  }

我也嘗試過類似的方法,但似乎無法使其正常工作。

$http.get(item.avatarpath,{responseType: "blob"}).
        success(function(data, status, headers, config) {
            // encode data to base 64 url
            fr = new FileReader();
            fr.onload = function(){
                // this variable holds your base64 image data URI (string)
                // use readAsBinary() or readAsBinaryString() below to obtain other data types
                console.log( fr.result );
            };
            fr.readAsDataURL(data);
            console.log(fr.readAsDataURL(data));
        }).
        error(function(data, status, headers, config) {
            alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)");
        });

在后端使用節點的http對象下載圖像。 就像是:

http.request(url, function(response) {                                        
     // Your code to write the file out or store it in the database here.                                                 
});                   

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM