2017-03-02 3 views
1

Ich benutze ngf-Datei-Upload-Modul, um Datei über Angularjs und Laravel hochladen.Datei hochladen in angularjs und laravel

Das ist mein html Initiator:

<div class="button" ngf-select="profile.uploadFiles($file, $invalidFiles)">Upload on file select</div> 

Dies ist mein Controller in Winkel

 vm.uploadFiles = function(file) { 
      if (file) { 
       file.upload = Upload.upload({ 
        url: 'http://localhost/api/uploadImg', 
        data: {file: file} 
       }); 
      } 
     } 

Dies ist mein Upload-API-Code in Laravel.

Meine eckige App läuft auf 9000 Port und Laravel im Standardport. Die Anfrage von eckig trifft die in Laravel eingebaute API, aber die Sache ist, dass die Datei fehlt. Obwohl mein Anfrage-Header im Browser-Netzwerk verdächtig aussieht. Wie content-type ist nicht multipart/form-data

This is the link of danial farid js fiddle

ich den gleichen Code verwenden, mit Änderungen mit meinem api zu synchronisieren, das heißt in der Geige erwähnt.

Die seltsame Sache ist, dass, wenn ich meine lokalen API Pfad zu dieser Geige gebe, dann funktioniert es gut. Aber es funktioniert nicht lokal an meinem Projekt. Ich denke, da ist etwas, das mir auf meiner schrägen Seite fehlt.

This is the image of param that is send when i am trying to upload file from local project

This is the image of param that is send when i am trying to upload file from fiddle to my api

Mein Fazit

Es gibt kein Problem in dem Code ist, weil ich bin in der Lage, die Datei aus einer HTML-Datei (nicht in meinem Winkel Projekt) hochzuladen, das ist speziell habe ich erstellt, um das Hochladen von Dateien zu testen, und es läuft.

ABER

Es versagt, wenn ich versuche, durch mein Projekt zu laden. Ich habe die Bilder meiner Konsole einen Fall angebracht ist, ein (Hochladen Bild durch zufällige Datei) zu arbeiten und andere nicht Fall arbeitet (wo ich bin Hochladen der Datei durch mein Projekt).

Ich mache nicht was als nächstes zu tun. Ich denke, dass etwas in meinem eckigen Projekt ein Hindernis in meinem Uploadprozess darstellt.

+0

Änderung print_r zu 'return $ data' und überprüfen Sie Ihre Konsole zu sehen, hinzuzufügen. Die Registerkarte Netzwerk Sehen Sie, was zurückgegeben wird – EddyTheDove

+0

Es zeigt mir das Gleiche. das ist garnichts. Obwohl die Anfrage in Ordnung ist. – Dherya

+0

Was meinen Sie mit "die Anfrage ist in Ordnung". Wenn Sie auf die Anfrage zugreifen können, verwenden Sie die Anfrage, um die Datei wie '$ request-> file ('file') zu bekommen;' – EddyTheDove

Antwort

0

Interceptor

Ja, kreierten sie Problem in Datei-Upload, weil wir Header in Abfangjäger

und die Standard-Header haben wir gesetzt in Abfangjäger

config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 

Für jede Anfrage gesetzt haben das, was aus unserer eckigen App gemacht wurde, läuft durch den Interzeptor und der Abfangjäger änderte jede Anfrage mit diesen Headern. Also muss ich diesen Header vom Abfangjäger entfernen.

Hinweis

Vergessen Sie nicht, die entfernt Header in jeder anderen Anfrage