Wenn ich eine Datei mit Roh-HTML auf einem Flask-Server poste, kann ich über die Flask-Anfrage global auf Dateien zugreifen:
<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
<input type="file" id="file" name="file">
<input type=submit value=Upload>
</form>
In der Flasche:
def post(self):
if 'file' in request.files:
....
Wenn ich versuche, dasselbe mit Axios zu tun, ist die globale Flaschenanforderung leer:
<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>
uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
Wenn ich die gleiche Funktion uploadFile wie oben verwende, aber die Header json aus der axios.post-Methode entferne, erhalte ich im Formularschlüssel meines Flask-Anforderungsobjekts eine CSV-Liste mit Zeichenfolgenwerten (Datei ist eine CSV-Datei).
Wie kann ich ein Dateiobjekt über Axios senden lassen?
javascript
ajax
file-upload
axios
Don Smythe
quelle
quelle
v-on:change="uploadFile"
mitinput
stattform
tag versucht ?Antworten:
Fügen Sie die Datei einem
formData
Objekt hinzu und setzen Sie denContent-Type
Header aufmultipart/form-data
.quelle
$_FILES
, um Dateien auf der ServerseiteFormData
. Laut axios 'Dokument werden beideFile
undFormData
nur als Browser behandelt , sodass beide Möglichkeiten gleichermaßen angezeigt werden können ( github.com/axios/axios#request-config )data:formData
formData.getHeaders()
Dies ist ein bekanntes Problem bei axios. siehe zBhttps://github.com/axios/axios/issues/789
Beispielanwendung mit Vue. Erfordert einen Backend-Server, der auf localhost ausgeführt wird, um die Anforderung zu verarbeiten:
https://codepen.io/pmarimuthu/pen/MqqaOE
quelle
Das funktioniert bei mir, ich hoffe es hilft jemandem.
quelle
headers: { 'Content-Type': 'multipart/form-data' }
war die einzige Möglichkeit, den Beitrag tatsächlich zu senden, nachdem eine Serverantwort von den Optionen erhalten wurde. Ich mache wahrscheinlich etwas falsch, aber es funktioniert und ich