Abrufen von Image-Datei von URL mit JS/Angular

Question

Ich arbeite beim Exportieren von Daten aus einer Wordpress-Umgebung in eine MongoDB mit MongooseJS als Datenmodell Brücken. Ich habe ein JSON mit allen Objekten einschließlich aller erforderlichen Informationen.

Als Beispiel habe ich auf die Wordpress-Server-URL zeigt Benutzer Element mit einem avatarpath Feld bekam: (ex: http://url/wp-content/upload/img/avatar.jpg)

Was würde ich es tun, das Bild von seiner URL abrufen, es hochladen In meinen neuen Speicherordner, lade den neuen Pfad ab und speichere das neue Objekt in meinem mongodb.

Mein Problem ist, dass ich nicht in der Lage bin, einen Weg zu finden, um die Dateidaten von einem http erhalten oder auf andere Weise zu erhalten. Normalerweise habe ich eine Dateieingabe in meinem HTML, und ich beginne mit dem Dateiobjekt von dieser Eingabe. Wie soll ich vorgehen, damit dies funktioniert? Gehe ich in die falsche Richtung?

Ich habe diese Antwort gefunden, aber es ist veraltet scheint: how to upload image file from url using FileReader API?

Hier ist, was ich jetzt habe:

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

    }); 
    } 

ich auch so etwas wie dies versucht haben, aber ich kann‘ Es scheint auch zu funktionieren.

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

Answer 1

Verwenden Sie das http-Objekt des Knotens auf dem Back-End, um das Image herunterzuladen. Etwas wie:

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