2014-11-08 13 views
5

provo a rendere l'applicazione angolare CRUD che è un po 'come "dropbox". Quindi, deve avere hosting di file e cartelle con funzionalità di condivisione e accesso. Sono bloccato su una domanda su come caricare file immagine e video? Ho usato File API (FileReader, Blob) per fare l'anteprima dei file sul lato client, ma non ho idea di come POST questo tipo di dati al server.caricare il file sul servizio RESTful in angularjs

+0

Usa [formdata] (https://developer.mozilla.org/en-US/docs/Web/API/FormData) – aarosil

+0

Quindi, devo creare l'oggetto FormData e quindi inserire i dati al suo interno e inviare l'oggetto FormData alla mia API? –

+0

Esattamente, posso pubblicare una risposta più dettagliata con codice di esempio, se lo desideri. – aarosil

risposta

6

Qualcosa del genere dovrebbe funzionare bene da inviare come multipart/form-data richiesta al backend API:

var file = ... // get from file input; 
var backendUrl = ... 
var fd = new FormData(); 

fd.append('myFile', file, 'filename.ext'); 

$http.post(backendUrl, fd, { 
    // this cancels AngularJS normal serialization of request 
    transformRequest: angular.identity, 
    // this lets browser set `Content-Type: multipart/form-data` 
    // header and proper data boundary 
    headers: {'Content-Type': undefined} 
}) 

.success(function(){ 
    //file was uploaded 
}) 

.error(function(){ 
    //something went wrong 
}); 

Vedi qui per riferimento:

FormData API Doc

Using FormData Objects (MDN)

multipart-formdata file upload with AngularJS

+0

E 'molto utile. Grazie per l'aiuto. –

+0

la soluzione di gran lunga più semplice fornita dall'interweb, grazie – FloydThreepwood

+1

Come si compila il "file" varialble? Io mena, come legarlo al controllo di input? – Nemus

0

È possibile caricare il file utilizzando le istruzioni ngFileUpload o angularFileUpload.

In caso di angularFileUpload, si utilizza .upload nel regolatore e in caso di ngFileUpload, si utilizza .http

Inoltre, è anche possibile utilizzare application/x-www-form-urlencoded tipo di contenuto anziché multipart ha fornito il tuo file non è enorme. In caso di applicazione/x-www-form-urlencoded, è possibile solo ricevere il valore in rest webservice come normale InputStream, senza che sia necessario il marshalling di dati multipart.

si può fare riferimento al seguente per i possibili modi per caricare file utilizzando js angolari e servizio web di riposo:

http://technoguider.com/2015/08/file-upload-using-angular-js-and-rest-web-service/

Problemi correlati