Ich habe zwei product Controller in meinem elixir / phoenix Backend. Erster - API-Endpunkt ( pipe_through :api ) und zweiter Controller piping through :browser :
ProductController verarbeitet Anfragen aus dem Formular, das von elixir-Formular-Helfern generiert wurde, und akzeptiert einige Dateianhänge. Alles ist in Ordnung. Hier sind create action und params, die von dieser Aktion verarbeitet werden:
params from log (Ich verwende arc für die Verarbeitung von Bilduploads im Elixiercode)
%Vor% Api.ProductController verarbeitet Anfragen von redux-from . Hier sind Aktion, Ansicht und Parameter, die von dieser Aktion verarbeitet werden:
Die Aktion "create" schlägt mit dem Status "422" fehl, da das Bild nicht mit diesen Parametern gespeichert werden kann. Mein Problem, dass ich nicht vom Backend-Code auf das Bild zugreifen kann, ich habe es nur in meinem JS-Code als FileList-Objekt. Ich verstehe nicht, wie man Bild an Backend-Code übergibt. Hier ist, wie dieser Anhang in meinem JS-Code (FileList, enthält Informationen über hochgeladene Bild) dargestellt.
%Vor%Ich habe nur WebkitRelativePath (Im Falle mit dem ersten Controller habe ich Pfad zu Bild: "/ tmp / plug-1460 / multipart-754282-298907-1") und ich weiß nicht, was ich mit diesem JS-Objekt tun kann und wie man auf das reale Bild, das von diesem JS-Objekt repräsentiert wird, zugreift (hier ist eine redux-form-Referenz über Dateiuploads).
Könnten Sie mir helfen? Wie erklärt man dem Elixier, wie man ein Bild findet? Ich möchte nur Dateianhänge an mein Backend senden mit JS-Code (weil es viele interessante Funktionen für asynchrone Validierung usw.).
Hier ist ein Link zu einer vollständigen App , falls es hilfreich sein könnte
Endlich habe ich es geschafft, dieses Problem zu lösen. Die Lösung besteht in der korrekten Serialisierung von redux-form gesendeten Parametern.
Hier ist meine redux Form, Startpunkt der Anfrage:
%Vor% Dieses Formular übergibt die folgenden Parameter an die Funktion handleSubmit , nachdem der Benutzer die Schaltfläche "Submit"
Um diese Parameter an das Backend zu übergeben, verwende ich die FormData Web API und die Datei-Upload-Anfrage mit isomorphic-fetch npm-Modul
Hier ist der Code hat den Trick:
%Vor% Dabei ist httpPostForm ein Wrapper um holen :
Und das ist es. Es gab nichts in meinem Elixiercode zu beheben, Api.ProductController bleibt gleich (siehe Anfangsbeitrag). Aber jetzt erhält es eine Anfrage mit den folgenden Parametern:
Vielen Dank für alle, die mir helfen wollen. Ich hoffe, dies könnte jemandem helfen, der mit ähnlichen Serialisierungsproblemen zu kämpfen hat.
Aus Ihrem Protokoll wird deutlich, dass das Bild es vom Browser zum Controller macht.
Der Leitfaden zu Datei-Uploads in den Phoenix-Dokumenten sollte für Sie hilfreich sein: Ссылка
Aus der Dokumentation:
Sobald wir die Plug.Upload-Struktur in unserem Controller zur Verfügung haben, können wir jede gewünschte Operation ausführen. Wir können überprüfen, ob die Datei mit File.exists / 1 existiert, sie mit File.cp / 2 an anderer Stelle auf das Dateisystem kopieren, mit einer externen Bibliothek an S3 senden oder sie sogar mit Plug an den Client zurücksenden .Conn.send_file / 5.
Ich denke, was in Ihrem Fall passiert, ist, dass die hochgeladene Datei gelöscht wird, wenn der Prozess endet, weil Sie die temporäre Version nicht an einem anderen Ort gespeichert haben. (Ich gehe davon aus, dass Sie es nicht bereits in der Datenbank speichern.) Ich würde den Code dafür in Ihren Controller schreiben, nachdem Sie überprüft haben, ob der Änderungssatz gültig ist.
Tags und Links reactjs redux file elixir redux-form