Wie man ein Bild mit AngularJS

Question

herunterlädt und dann hochlädt Ich habe eine Angularjs 1.5.0 Webanwendung, die mit einem REST-basierten Webdienst kommunizieren sollte, den ich entwickelt hatte (mit Dropwizard & Jersey) und getestet, dass es perfekt funktioniert.

Die REST Web-Service-Methode ist wie folgt:

@POST 
@Path("/saveImage") 
public Response saveImage(
    @FormDataParam("imagefile") InputStream uploadedInputStream, 
    @FormDataParam("imagefile") FormDataContentDisposition fileDetail) { 

    // save image on server's file system and return OK 
} 

Gescannte Bilder sind für mich verfügbar von dem lokalen Web-Server des Scanners über einen Link wie folgt aus: http://localhost:9980/thumb/random-generated-guid.jpg

In meinem AngularJS Code, ich will um das Bild, das mit dem obigen Link verfügbar ist, an meinen REST-Service zu senden.

Weiß jemand, wie man das macht?

Ich habe zuerst versucht, das Bild als Blob zu speichern und dann an den Webdienst zu senden. Ich könnte das Bild mit Javascript XMLHttpRequest speichern, aber das Senden schlägt immer fehl. -Code zum Speichern des Bildes als Blob:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', imageAddress, true); 
xhr.responseType = 'blob'; 
var imageData = null; 

xhr.onload = function(e) { 
    if (this.readyState === 4 && this.status === 200) { 
     // get binary data as a response 
     imageData = this.response; 
     var gatewayResponse = sendToGateway(imageData); 
    } 
}; 

-Code für das Senden der Blob-Daten:

var sendToGateway = function(imageDataBlob) { 
     var formdata = new FormData(); 
     formdata.append('imagefile', imageDataBlob) 
     $.ajax({ 
      url: 'http://localhost/eval/saveImage', 
      method: 'POST', 
      contentType: 'multipart/form-data; charset=UTF-8', 
      data: formdata, 
      dataType: 'json', 
     }) 
     .done(function(response) { 
      $log.info("**************** response = " + response); 
      alert("response:\n" + response); 
     }) 
     .fail(function(jqXHR, textStatus, errorThrown) { 
      $log.error("!!!! FAIL !!!!!!!!!"); 
      alert("FAIL !!!!!!!"); 
     }) 
     .always(function(){ 
      $rootScope.scannerInactive = false; 
      doStartPreviewUpdate(); 
     }); 
    }; 

Eigentlich ist das Problem, wenn die sendToGateway (imagedata); heißt, ich den Fehler:

TypeError: 'append' called on an object that does not implement interface FormData.

value = jQuery.isFunction(value) ? value() : (value == null ? "" : value);

Answer 1

oops, ich fand das Problem. Ich hätte die folgenden Direktiven zum $ .ajax() - Aufruf hinzugefügt.