Axios: Kann eine .post mit 'Content-Type': 'multipart/form-data' nicht zum Laufen bringen

Der Code sieht für mich gut aus. (Sie müssen den Content-Type nicht setzen, aber es ist nicht wichtig.) Was passiert, wenn Sie versuchen, eine Anfrage über Axios zu senden?

Mir ist aufgefallen, dass das Festlegen von Content-Type oder nicht in diesem Fall nichts ändert. Wenn ich versuche, die Anfrage mit Axios zu senden, scheinen Daten als leere Zeichenfolge zu gehen, sodass das Backend mit einem Fehler im Zusammenhang mit fehlenden Parametern antwortet.

Ich habe 0.9.1 verwendet, aber das Problem besteht weiterhin auf 0.11.0.

Bitte lassen Sie mich wissen, ob ich noch irgendetwas tun kann, um beim Debuggen zu helfen, ok?
Tks @nickuraltsev !

Könnten Sie bitte einen Blick darauf werfen, wie Ihre Anfragen im Netzwerkbereich von Chrome Dev Tools aussehen, und wenn möglich einen Screenshot bereitstellen?

@nickuraltsev sehen, ob das hilft:

Ich denke, die Request-Header sind falsch.

Es gibt also keine Request Payload?

Nun, das hätten wir tun sollen, aber die Daten werden als leerer String ausgegeben. Ich weiß nicht, was es kaputt machen könnte (in Anbetracht des Codes, den ich in meinem ersten Beitrag geteilt habe).

Ich verstehe. Und es gibt keinen Abschnitt „Request Payload“ für Ihre Anfragen in Dev Tools, richtig?

Möglicherweise damit zusammenhängendes Header-Problem. Wenn der Inhaltstyp im Konfigurationsobjekt in der Anfrage festgelegt ist, wird er verkettet, z
axios.post(
'https://example.com/login',
{E-Mail-Adresse: E-Mail, Passwort: HashedPassword},
{header: {'content-type': 'application/json'}}
);

header content-type kommt als application/json,application/json
body wird in diesem Fall nicht geparst

@nickuraltsev richtig! Was Sie auf diesem Screenshot sehen, ist alles, was ich an Entwicklungstools habe.
@rrapant mag Recht haben, aber ich bin mir fast sicher, dass das Festlegen 'Content-Type' oder nicht, zumindest in diesem Fall, nichts geändert hat. Müsste ich sicherheitshalber nochmal prüfen.

@rrapant Das Problem mit doppelten Inhaltstypwerten wurde durch #317 behoben. Der Fix wird in der nächsten Version enthalten sein. Danke schön!

@rafaelbiten Ich habe gerade versucht, das Problem zu reproduzieren, aber ohne Erfolg. Ich habe folgenden Code verwendet:

const data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob(['test payload'], { type: 'text/csv' }));

axios.post('http://httpbin.org/post', data);

Die Daten wurden erfolgreich an den Server gesendet:

@rafaelbiten Könnten Sie bitte versuchen, eine Anfrage mit FromData an http://httpbin.org/post zu senden, wie in meinem Code-Snippet?

Schließe dies vorerst. Bitte zögern Sie nicht, bei Bedarf wieder zu öffnen.

Hallo @nickuraltsev , ich habe das gleiche Problem.

      var fd = new FormData();
      fd.append('file', this.refs.multipartfiles.files[0]);

            const config = { headers: { 'Content-Type': 'multipart/form-data' } };
            axios.post('/dataAPI/sendFile', {
                "UploadCommand": fd
              }, config)
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });

Den Screenshot meiner Header-Informationen finden Sie unten,

Ich habe eine Frage: _Unterstützt Axios das Senden mehrteiliger Datendateien an den Knotenserver?_

@Sreekhar Ich weiß nicht, ob es funktionieren wird, aber könnten Sie vielleicht die FormData als zweites Argument hinzufügen, anstatt sie in ein anderes Objekt zu packen?
axios.post('/dataAPI/sendFile', fd, config)

Wenn Sie „UploadCommand“ als Namen des Teils verwenden müssen, in dem sich die Datei befindet, müssen Sie dies verwenden
fd.append('UploadCommand', this.refs.multipartfiles.files[0]);

@yungpanda Ich habe eine Alternative dafür gefunden. Ich denke, ich muss die API jetzt neu erstellen. Wie auch immer, ich werde versuchen und überprüfen, ob es funktioniert, ich werde den Thread auf dem Laufenden halten. Danke für deine Antwort.

@Sreekhar Setzen Sie Content-Type auf undefined, damit der Browser ihn in multipart/form-data ändern und automatisch Grenzen hinzufügen kann

@nickuraltsev Dies ist ein Minimalbeispiel, das auf dem Knoten nicht funktioniert:

const data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);

axios.post('http://httpbin.org/post', data).then(req => {
  console.log('Req done: ', req)
}).catch(err => {
  console.error('Error: ', err)
})

Fehler: nach Ende schreiben

@krzkaczor Haben Sie eine Lösung gefunden, um Multipart/Form-Daten mit Axios zu senden?

@PierreCavalet nein, ich habe stattdessen request-promise verwendet.

@krzkaczor danke, musste auch wechseln

@krzkaczor Versuchen Sie, den Inhaltstyp hinzuzufügen, wenn Sie dies noch nicht getan haben

const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('file',files[0])
return axios.post("http://localhost:5000/upload", fd, config)

@krzkaczor Ich stehe auch vor dem gleichen Problem mit Axios und Multipart/Form-Daten. Können Sie den Kern des Codes posten, den Sie mit Request-Promise verwendet haben.

@dan-boa los geht's: https://gist.github.com/krzkaczor/bdbe09d4096b051a3c18387c4ca79a06 Es zeigt auch einen Hack, wie man eine Zeichenfolge als Datei sendet (Einstellungspfad)

Falls sich jemand fragt, hier ist ein Beispiel, wie man FormData mit axios verwendet. Grundsätzlich müssen Sie die Daten in einen Puffer streamen und die richtigen Header übergeben.

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(file))
fd.pipe(concat(data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

Ich hatte das gleiche Problem (im Browser, nicht im Knoten). Es hat sich herausgestellt, dass es funktioniert, wenn Sie den Header Content-Type überhaupt nicht setzen und Axios die Dinge herausfinden lassen (überprüfen Sie auch, ob Sie diesen Header nicht auch in den Axios-Interceptoren als Standard festlegen. Wenn Sie welche benötigen Standardwerte für den Rest der API-Aufrufe, Sie können eine separate Axios-Instanz für FormData()-Anfragen erstellen)

Am Ende ging ich mit Request-Promise auf der Knotenseite, als ich versuchte, auf einen anderen Remote-Server hochzuladen.

Ich bin aus demselben Grund auf Anfrage-Versprechen umgestiegen. Liebe Axios ansonsten aber!

@guncha Ihr Beispiel hat in 0.15.3 für mich funktioniert, bis ich versucht habe, eine Binärdatei hochzuladen, die als UTF8 codiert wurde. Concat anzuweisen, einen Puffer zu verwenden, hat das Problem behoben.

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(binaryFile))
fd.pipe(concat({encoding: 'buffer'}, data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

Alternativ würde ich ein Versprechen verwenden:

const promise = new Promise((resolve) => {
  const fd = new FormData();
  fd.append("hello", "world");
  fd.append("file", fs.createReadStream(binaryFile));
  fd.pipe(concat({ encoding: 'buffer' }, data => resolve({ data, headers: fd.getHeaders() })));
});
promise.then(({ data, headers }) => axios.post('/hello', data, { headers }));

const callApi = (url, params) => {
  const formData  = new FormData()
  for(let name in params) {
    let param = params[name]
    if (typeof param === 'object') {
      param = JSON.stringify(params[name])
    }
    formData.append(name, param)
  }

  return axios.post(url, formData)
    .then(response => {
      console.log(response)
    })
}

@guncha arbeitet für mich. Danke schön

gleiches Problem hier

fügen Sie einfach eine Grenze zu Content-Type hinzu:

const request = require('axios');
const FormData = require('form-data');
const fs = require('fs');

let data = new FormData();
data.append('file1', fs.createReadStream('./image1.jpeg'), 'image1.jpeg');
data.append('file2', fs.createReadStream('./image2.jpeg'), 'image2.jpeg');

let options = {
    method: 'POST',
    url: 'http://localhost:3200/upload',
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    data
};

return request(options)
    .then(response => {
        console.log(response);
    });

Hallo,
Ich bekomme diese Datei im JSON-Format. Kann mir jemand helfen, wie ich sie in eine mehrteilige Datei konvertieren soll?
Die verwendete Plattform ist java8.
"body": "------WebKitFormBoundaryQsJGeBuR8e9dQ4Pm\r\nContent-Disposition: form-data; name=\"file\"; filename=\"backup prolog.txt\"\r\nContent-Type: text/plain\r\n\r\n%All the Pre-Defined relations\r\nconnected(hira,rohit,father).\r\nconnected(rohit,rakesh,father).\r\nconnected(ram,hira,father).\r\nconnected(kavri,hira,mother).\r\nconnected(hira,kavri,son).\r\nconnected(arun,vinayak,father).\r\nconnected(vinayak,arun,son).\r\nconnected(arun,shashi,husband).\r\nconnected(shashi,arun,wife).\r\nconnected(vinayak,vardaan,brother).\r\nconnected(vardaan,vinayak,brother).\r\nconnected(shashi,vinayak,mother).\r\nconnected(vinayak,shashi,son).\r\n\r\n\r\n\r\nconnected2(X,Y,D) :- connected(X,Y,D).\r\n%connected2(X,Y,D) :- connected(Y,X,D).\r\n\r\nnext_node(Current, Next,R, Path) :-connected2(Current, Next, R),not(member(Next, Path)).\r\n\r\nfunc(how,is,X,related,to,Y):-depth_first(X,Y,[X],P),write(P).\r\n%Procedure to Start the depth_first\r\ndepth_first(Goal, Goal, _, [Goal]).\r\n\r\ndepth_first(Start, Goal, Visited, [Start,is,R,of|Path]) :-next_node(Start, Next_node,R, Visited),depth_first(Next_node, Goal,[Next_node,R|Visited], Path).\r\n\r\n\r\n\r\n\r\n\r\n\r\n------WebKitFormBoundaryQsJGeBuR8e9dQ4Pm--\r\n"
Danke

Code funktioniert im Browser, aber nicht auf dem Knoten.

const fdata = new FormData();
fdata.append('user', u);
fdata.append('hostnames', n.join(' '));
const host = localStorage.getItem('host');
const port = localStorage.getItem('port');
axios({
  url: `http://${host}:${port}/hosts/remove`,
  method: 'post',
  data: fdata
}).then(response => {
  if (response.status === 200) {
    console.log(response.data);
    console.log('Removed host successfully');
  }
  return null;
}).catch(er => console.log(er));

Hallo @Sreekhar
Bei mir habe ich die config auf geändert
const config = { headers: { 'Content-Type': 'application/json' } };
und es hat gut funktioniert

Bitte öffnen Sie es erneut, bis es eine konsistente Antwort/einen konsistenten Workflow dafür gibt. Es scheint, als hätten viele Leute immer noch Probleme damit.

+1 wieder öffnen

HTTP-Posts, die Binärdateidaten enthalten, scheinen in Axios v0.16.2 einwandfrei zu funktionieren

// The following was tested successfully with axios v0.16.2

// Create a new form.  Note:  could also specify an existing form as
// the parameter to the FormData() constructor to copy all the elements
// from the existing form to the new one being created.

var tempFormData = new FormData();

var someNoteValue = 'Hello World';
var someAudioData = [];  // populate this with data from file, with MediaRecorder() etc.


// Add form fields

tempFormData.set('SomeNote', 'Hello World');
tempFormData.set('SomeRecording', someAudioData[0], 'SampleRecording.webm');


// Optional:  output list of form fields to the console for debugging

for (var pair of tempFormData.entries()) {
    console.log('Form field: ' + pair[0] + ', ' + pair[1]);
}


// Call Axios to post the form to myurl

axios({
    method: 'post',
    url: 'myurl',
    data: tempFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
})
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

            }

Auch bei der Verwendung von Puffern zur Darstellung von Dateien hat dies für mich funktioniert:

      const form = new FormData();
      const fileBuffer = new Buffer(
        'MM2 - noticeably shallower than the original - score: 101%', 'utf-8'
      );
      form.append('name', 'reviews.txt'); // additional form data field
      form.append('file', fileBuffer, 'original-file-name.bar');

      const res = await axios.post(`/uploadfile`, form, { headers: form.getHeaders() });

Wichtig zu beachten: Keine der oben genannten Lösungen funktioniert NICHT , wenn Sie Standarddatenparameter in den Standardeinstellungen der Axios-Instanz festgelegt haben. Sie können auch prüfen, ob Sie einen Standard-Content-Type-Header in Ihrer Axios-Instanz angeben (über axios.defaults.headers und axios.defaults.parameters).

Dies ist möglicherweise nicht zutreffend, aber das Problem könnte mit der Verwendung body-parser auf der Serverseite zusammenhängen. Ich hatte mit einem ähnlichen Problem zu kämpfen und bin auf diesen Beitrag gestoßen:

https://philna.sh/blog/2016/06/13/the-surprise-multipart-form-data/

TL;DR - body-parser verarbeitet keine Multipart/Formular-Daten. Mit anderen Worten, axios ist nicht das Problem, sondern body-parser . Das könnte der Grund sein, warum die oben erwähnten Pufferlösungen funktionieren.

Ich gehe davon aus, dass diese Funktionalität aus Sicherheitsgründen dient, wie hier angegeben:

http://andrewkelley.me/post/do-not-use-bodyparser-with-express-js.html

Ich hoffe, das hilft jemandem!

Ich habe das gleiche Problem. Ich benutze Axios 0.16.2 und das Senden per XMLHttpRequest funktioniert, aber nicht per Axios.

Ich habe ein grundlegendes FormData-Objekt:

const formData = new FormData();
formData.append('name', 'textName');

Ich habe den Vorschlag von @ Janekk ausprobiert:

axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
    })

dann @faalkhahs Vorschlag:

const config = { headers: { 'Content-Type': 'application/json' } };
    axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
      config,
    })

oder @askonas Vorschlag:

const config = { headers: { 'Content-Type': undefined } };
    axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
      config,
    })

Der Anfrage-Header ist application/json und formData ist leer.

Ich weiß nicht, wie ich @demeter-macik fix ausprobieren soll, da es anscheinend nur im Back-End https://stackoverflow.com/a/13454425/968379 funktioniert

Hallo zusammen,
Ich habe das gleiche Problem
mein Code im Client
`

    const url = '/file/uploadTest';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('params1', value);
    formData.append('params2', value2)

    const config = {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    }
    axios.post(url,formData,config)`

im Segelserver protokolliere ich die Konsole req.body
Ich fand, wenn ich die Anfrage 10 Mal anrufe, gibt es ungefähr 3 4 Mal, dass der Server den Körper nicht empfängt (der Körper ist leer).
Ich habe in devtool von Chrome eingecheckt, die Anfrage hat immer noch die Datei und den Körper in der Nutzlast übertragen.
Ich habe immer noch nicht herausgefunden, warum, aber ich habe eine Lösung

das ist der Request-Header.

`Code

    const url = '/file/uploadTest';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('params1', value);
    formData.append('params2', value2)
    const config = {
        headers: {
            'Content-Type': 'multipart/form-data',
            'params1': value,
            'params2': value2
        }
    }
    axios.post(url,formData,config)`

Hallo @Sreekhar ,
Hast du das Problem gelöst? Ich habe die Lösung nicht gefunden, kann mir jemand helfen, bitte.
Auch Danke im Voraus

Hallo,

Ich habe versucht, Multiformdata zu posten (es ist eine Eztext-SMS-API)
Verwendung von Axios mit node.js.

Es funktioniert gut für folgenden Code,
return new Promise(function(auflösen, ablehnen) {

        var request = require("request");
        var options = {
            method: 'POST',
            url: 'https://app.eztexting.com/sending/messages',
            qs: {format: 'json'},
            formData:
                {
                    User: '**',
                    Password: '**',
                    'PhoneNumbers[0]': '8572222***',
                    Message: 'Appointment Reminder',
                    MessageTypeID: '1'
                }
        };
        request(options, function (error, response, body) {
            if (error) {
                console.log(error);
                reject(error);
            }
            else {
                console.log(response);
                resolve(response);
            }

            // console.log(body);
        });

Aber es funktioniert nicht mit Axios, da SMS nicht gesendet werden, aber ich bekomme den Statuscode als 200 für folgende Anfrage:-
var axios=require('axios');

         axios.post('https://app.eztexting.com/sending/messages', {
             qs: { format: 'json' },
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             formData:
                 { User: '****',
                     Password: '2sH****5',
                     'PhoneNumbers[0]':'85722******',
                     Message: 'Hello Yahska',
                     MessageTypeID: 1 }
         })
             .then(function (response) {
                 console.log(response);
             })
             .catch(function (error) {
                 console.log(error);
             });

Warum ist die Post-Anfrage mit der 'Request'-Bibliothek ein Erfolg und nicht mit Axios?

Haben Sie versucht, die Daten von JSON in FormData zu konvertieren, ohne einen Header festzulegen?
Kopfzeilen für die Daten (dh neben Authentifizierungskopfzeilen) sollten automatisch gehandhabt werden

async function sendMessage(myJSONPayload){
  try{
    const data = convertJSON2FormData(myJSONPayload);

    const response = await axios.post('https://app.eztexting.com/sending/messages', {
  data
});
    console.log(response);
  } catch(ex){
    console error(err);
  }
}

sendMessage ({ User: '****',
                     Password: '2sH****5',
                     'PhoneNumbers[0]':'85722******',
                     Message: 'Hello Yahska',
                     MessageTypeID: 1 }
         });

Verwenden Sie für die Konvertierung von JSON nach FormData so etwas wie in dieser Antwort

Denken Sie daran, dass verschachtelte Schlüssel schwierig zu handhaben sind. Wenn wir beispielsweise Daten an unser Backend senden, funktioniert es, wenn wir sie wie folgt glätten:

{a: {b: 2}} --> formData.append("a.b",2)

selbes Problem hier.

natürlich @michaelscheuer! Das Festlegen der Header einer Anfrage reicht nicht aus: Sie müssen ein FormData übermitteln, damit es funktioniert. Es ist ein Browserobjekt, das mit allen richtigen Grenzen serialisiert wird, um mit der Anfrage zu arbeiten ... weder Axios noch Vanilla Js werden JSON-Daten für Sie in FormData konvertieren. Axios erkennt, dass es sich um FormData handelt, und legt auch die Header für Sie fest, sodass Sie sie nicht wirklich festlegen müssen
Versuchen Sie, meinen vorherigen Antworthinweisen zu folgen ...

@Iamuertepeluda
Ich habe Folgendes gemäß Ihrem Vorschlag versucht, aber kein Glück, gleiches Verhalten, da ich den Status 200 ok erhalte, aber die SMS mit der folgenden Anfrage nicht gesendet wird
var axios=require('axios');

    const FormData = require('form-data');

    const form = new FormData();

    //fo this jason I created a form
    // formData:
    // {
    //     User: '*****',
    //         Password
    // :
    //     '******',
    //         'PhoneNumbers[0]'
    // :
    //     '8****2763',
    //         Message
    // :
    //     'Appointment Reminder',
    //         MessageTypeID
    // :
    //     '1'
    // }

    form.append('User','****');
    form.append('Password','*****');
    form.append('PhoneNumbers[0]','*****');
    form.append('Message','Appointment Reminder');
    form.append('MessageTypeID','1');


         axios.post('https://app.eztexting.com/sending/messages', form,
    {
        qs: {format: 'json'},
        headers:
        {
                'content-type'
        :
            'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
        }
    }
)
             .then(function (response) {
                 console.log(response);
             })
             .catch(function (error) {
                 console.log(error);
             });

@ Ruchi2729 verwenden Sie node.js oder einen Browser?

in einem Browser brauchen Sie const FormData = require('form-data'); nicht, da FormData nativ ist.

Versuchen Sie außerdem, ohne Header und qs zu setzen, oder versuchen Sie es

axios.request({
 url: "https://app.eztexting.com/sending/messages"
 type: "post",
 data: form //the instance of FormData of your stub
});

Wie ich bereits erwähnt habe, sollte es Header automatisch in einem Browser setzen

@ Ruchi2729 Ich sehe, Sie verwenden Knoten, tut mir leid.
Ich erinnere mich, form-data einmal mit Axios verwendet zu haben, aber ich erinnere mich nicht, ob es tatsächlich funktioniert hat.

Aber sind Sie sicher, dass dies die richtige Art ist, SMS mit eztexting zu versenden? Aus ihren Dokumenten scheint es anders zu sein, als ob Sie einen API-Schlüssel und ihren eigenen Knotenclient verwenden sollten ...

können wir das wieder eröffnen? Es sieht so aus, als würden sich immer noch viele Leute dagegen wehren, einschließlich mir. Zum Beispiel schafft es diese Anfrage nicht wie erwartet über Axios zum Server, aber wenn ich dieselbe Datei über Postman als multipart/form-data sende, funktioniert alles.

Bearbeiten: Mein Problem war der Versuch, eine base64-codierte Daten-uri als Formulardaten zu senden. Wenn jemand anderes mit dem gleichen Problem zu kämpfen hat, hier ist ein Beispielcode zum Konvertieren:

async function importCsv(data: CsvImportData): Promise<void> {
    const formData = new FormData();
    const headers = {'Content-Type': 'multipart/form-data'};

    formData.append('csv', dataURItoFile(data.file, `upload_${Date.now()}.csv`));

    try {
      await axios.post('https://example.com/api/upload/csv', formData, {headers});
    } catch(e) {
      console.error(e);
    }
}

function dataURItoFile(dataURI: string, defaultFileName: string): File {
  let byteString: string;
  const [metadata, data] = dataURI.split(',');
  if (/base64$/.test(metadata)) {
    byteString = atob(data);
  } else {
    byteString = unescape(data);
  }

  const mimetype: string = metadata.split(':')[1].split(';')[0];
  const filename: string = (metadata.match(/name\=(.*);/) || [])[1] || defaultFileName;

  let dataView: Uint8Array = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    dataView[i] = byteString.charCodeAt(i);
  }
  return new File([dataView], filename);
}

Hey, ich beziehe mich auf dieses Dokument: https://www.eztexting.com/developers/sms-api-documentation/rest#Sending
Auf welches Dokument beziehen Sie sich für den API-Schlüssel und alles?

@Ruchi2729
Entschuldigung, ich habe es mit Nexmo verwechselt, das ist ein weiterer SMS-Dienst und hat einen eigenen Client für Knoten 😅

Aber wie auch immer, gemäß der Dokumentation, auf die Sie sich bezogen haben, können Sie FormData vermeiden, indem Sie format auf json setzen und Axios eine JSON-Nutzlast senden lassen (Sie können Header implizit durch das Nutzlastformat erraten lassen).

https://app.eztexting.com/sending/messages?format=json

Ich habe viel länger damit gekämpft, dass ich zugeben möchte, also hilft das hoffentlich jemandem. Ich verwende axios, express und express-fileupload. Ich kann mit Parametern, die ich an die FormData angehängt habe, erfolgreich auf Node hochladen. Ich hole die Dateien mit req.files ab und ich hole den Rest der Formulardaten mit req.body['yourfilename'] ab.

Server (Express):

router.post('/helper/amazon/upload', function(req, res) { if (!req.files) { return res.status(400).send('No files were uploaded.') } console.log(req.body.filename); return console.log(req.files);

Front-End (Axios)

const formData = new FormData(); formData.append('file', this.validFile); formData.append('filename', 'trails/' + this.$route.params.id.split('-')[0] + '/camping/'); axios.post( /api/helper/amazon/upload , formData, { headers: { 'Content-Type': 'multipart/form-data' } });

Ergebnis:

Ich habe das gleiche Problem, ich kann sehen, dass ich die Dateidaten erfolgreich mit meinen Entwicklungswerkzeugen sende, aber in meinem Contoller ist mein $request->file('file') leer
Meine Komponente

sendForm() {
this.formData =neue Formulardaten();
this.formData.append('file',this.$refs.file.files[0]);
this.formData.append('analysis',this.analyticsForm.analysis);
this.formData.append('_method','PATCH');
axios.post('/analytics',
this.formData
,{headers: {'Content-Type': 'multipart/form-data'}}).then(response => this.isSubmittedRedirect(false,'/sources/'+this.source+'/description'+'') )
.catch((Fehler) => Konsole.log(Fehler))
},

Ich fand, dass es ein Problem war, irgendetwas mit FormData zu tun, da MVC es anscheinend nicht mag, etwas auf diese Weise zu bekommen, weil Sie den Content-Type als multipart/form-data angeben müssen und es eine Ausnahme ausgelöst hat, als ich es getan hätte überprüfen Sie if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } , wie auf der Microsoft-Website angegeben: https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part- 2

Es war besser, meine Datei einfach in eine base64-Zeichenfolge zu bringen:
https://stackoverflow.com/questions/37134433/convert-input-file-to-byte-array/49676679#49676679

Dieser Beitrag ist möglicherweise relevanter, da ich in diesem Beispiel eine DropZone verwendet habe:
https://stackoverflow.com/questions/32556664/getting-byte-array-through-input-type-file/49660172#49660172

Und ich gehe hier detaillierter darauf ein: https://stackoverflow.com/questions/47574218/converting-from-blob-to-binary-to-save-it-to-mongodb/49660839#49660839

Dann könnte ich ein JSON-Objekt erstellen:

const myObj = {
   file = myBase64String,
   title = "myfileTitle.jpg"`
   type = "image/jpeg"`
}

Anstatt Axios zu verwenden, habe ich einfach eine XMLHttpRequest verwendet.

 const xhr = new XMLHttpRequest();

Und öffnen und setzen Sie den Header:

 xhr.open('POST', '/api/FileUpload/Post', true);
 xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8' );
 xhr.withCredentials = true;

Ich setze onreadystatechange , um die Antwort zu erfassen:

xhr.onreadystatechange = (response) =>
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(response.target.responseText);
    }
}

und senden:

 xhr.send(JSON.stringify(myObj));

Wenn Sie Axios verwenden, wäre es wahrscheinlich:

try {
    var axios = require('axios');
    const config = {
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        }
    }
    await axios.post('https://example.com/api/upload/post', myObj, config)
        .then(function (response) {
             console.log(response);
         })
         .catch(function (error) {
             console.log(error);
         });
}
catch(e) { console.log(e); }

Auf der MVC-Seite benötigen Sie ein passendes Modell:

public class MyModel {
    public string file { get; set; }
    public string title { get; set; }
    public string type { get; set; }
}

und haben Sie das dann als Parameter in Ihrem Post-Aufruf mit einem [FromBody]-Tag:

[System.Web.Http.HttpPost]
public virtual JsonResult<string> Post([FromBody]MyModel myModelObject)
{
    string strBase64FileString = myModelObject.file;
    string strTitle = myModelObject.title;
    string strFileType = myModelObject.type;

    return Json(JsonConvert.SerializeObject(new { file = myModelObject.file, title = myModelObject.title, myModelObject.type }));
}

Sie sollten zurückbekommen, was Sie gesendet haben. Beachten Sie, wenn Sie dies als Test implementieren, tun Sie dies mit einer sehr kleinen Datei, damit Sie nicht ewig warten müssen, da möglicherweise der Browser/Speicher Ihres Systems blockiert wird.

@navyjax2
Ich habe es so gemacht, wie Sie gesagt haben, es hat mit einer kleinen Datei gearbeitet, aber ich muss eine große Datei (> 250 MB) senden, und ja, es hat meinen Browser blockiert

Ja, dafür möchten Sie vielleicht das Dateiarray in Stücke einer überschaubaren Größe aufteilen und Blöcke einsenden, eine Methode am anderen (serverseitigen) Ende haben, die sie neu kombinieren kann, und ihr einen Parameter dafür geben weiß, um welchen Chunk es sich handelt (1., 2., 3. usw.) und wie viele Chunks insgesamt zu erwarten sind, bevor die Datei serverseitig verarbeitet wird. Aber ich denke, egal was Sie tun, bei einer Datei dieser Größe müssen Sie warten, bis sie ihre Aufgabe erfüllt. Auch bei der Chunk-Methode müssen Sie auf die Speicherverwaltung achten, da Sie sicherstellen müssen, dass Sie Ihre Variablen jedes Mal löschen oder wiederverwenden und nicht jedes Mal neue Versionen derselben Variablen neu instanziieren Du machst einen Block. Eines der wenigen Male, in denen eine globale Variable gut ist - oder einfach bei jedem Lauf auf ein Modellfeld gesetzt wird.

Ich stimme @epferrari zu, bitte erwägen Sie, dieses Problem erneut zu öffnen.
Es ist in Ordnung, einen base64-String mit FormData in Chrome zu senden, aber mit Axios in node(v8.9.3) geht das einfach nicht.
Und es funktioniert mit Node-Fetch ...

const fetch = require('node-fetch')
const axios = require('axios')
const FormData = require('form-data')
const base64Img = require('base64-img')

const b64 = base64Img.base64Sync('./test.jpg').split('base64,')[1]
const form = new FormData()
form.append('b64_data', b64)
const headers = form.getHeaders()

// with node-fetch it worked
fetch('http://some.url', {
  method: 'POST',
  body: form,
  headers,
}).then(res => res.text()).then(console.log).catch(console.log)

// not working with axios
axios({
  method: 'POST',
  url: 'http://some.url',
  data: form,
  headers,
}).then(console.log).catch(console.log)

=== aktualisieren ===
Ich verstehe nicht, ich verwende dieselben Header für Node-Fetch und Axios, und es scheint, dass sie dieselben Formulardaten an den Server senden. Wie kommt es, dass sie unterschiedlich enden?
Übrigens kommt die eigentliche URL, die ich poste, von hier , was ich tue, ist, die HTTP-Anfrage des Browsers mit nodejs zu simulieren, um ein Bild an den Server zu senden und einen Link zurückzubekommen.

Ich habe dies umgangen, indem ich Folgendes verwendet habe:

<input onChange="emitImageInfo(this)" type="file" multiple>

function emitImageInfo($event){
  let files = $event.target.files
  let formData = new FormData();

  for (let i = 0; i < files.length; i++)
      formData.append('image[' + i + ']', files[i])

  axios.post('file/upload', formData)
     .then((result) => { console.log('got it') })
     .catch((err) => { console.log(err) })
}

das hat funktioniert:

axios.post(localhost:3000/items, formData, { headers: { 'Content-Type': 'multipart/form-data' }});

Ich habe das gleiche Problem

funktioniert nicht mit Golang

Finden Sie einfach einen einfachen Weg in Vue, aber ich denke, es kann in anderen Situationen verwendet werden.😀
Backend: Express.js und express-fileupload-Paket.

<template>
  <div>
    <input type="file"
           name=""
           id="file-upload"
           multiple
           @change="filesChange($event.target.files)">
    <button @click="handleSubmit">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: new FormData(),
    };
  },
  methods: {
    filesChange(fileList) {
      // First: append file to FormData
      Array.from(Array(fileList.length).keys()).map(x => {
        this.formData.append(fileList[x].name, fileList[x]);
      });
    },
    handleSubmit() {
      // Append Text
      this.formData.append('username', 'Jeremy');

      // Append Number: Will be string
      this.formData.append('number', 9527);

      // Append Array: Need to be converted to a string
      this.formData.append('arrData', JSON.stringify([1, 2, 3]));

      // Append Array: Need to be converted to a string
      this.formData.append(
        'objData',
        JSON.stringify({ name: 'Jeremy', age: 28 })
      );

      this.axios({
        method: 'post',
        url: `file/multi-users`,
        data: this.formData,
      }).then(res => {
        console.log(res);
      });
    },
  },
};
</script>

Sogar wir standen vor dem gleichen Problem. Der Content-Type-Header wurde aus dem Reaktions-Java-Skript entfernt und dann funktionierte es einwandfrei. Früher wurde die Grenze nicht eingerichtet, wenn Sie den Inhaltstyp explizit festgelegt haben

BEARBEITEN: Nach weiterem Lesen scheint Express das Problem auf meiner Seite zu sein. Hoffentlich könnte dies für andere von Nutzen sein

Dasselbe Problem hier. @nickuraltsev Würde DRINGEND empfehlen, das Problem erneut zu öffnen.

Ich versuche, eine Datei über Axios mit dem folgenden Code auf meinen Node-Server zu posten:

let ff = new FileReader();
ff.onload = (ev) => {
      var result = ev.target.result;
      console.log(`result: ${result} of type ${typeof(result)}`);
      axios.post('/test', {
                 file: result
                 })
                 .then((response) => {
                         console.log(`Response: ${response}`)
                  })
                  .catch((err) => {
                        console.log(`Test error: ${err}`);
                   })
}

var sampleFile = //getting the file here
ff.readAsArrayBuffer(sampleFile);

Der Text der Anfrage ist serverseitig jedoch komplett leer

Ich habe versucht, die Datei direkt zu senden, die Datei als ArrayBuffer zu lesen und die Datei als Text zu lesen (die Nutzlast ist jedoch zu groß), und alle 3 haben nicht funktioniert.

Zwei Jahre später:
Gleiches Problem...

@demeter-macik danke, das Hinzufügen von Grenzen hat bei mir funktioniert :smile:

    const form = new FormData();
    form.append('email', '[email protected]');
    form.append('phone_no', '63');
    form.append('phone_code', '9179303100');

    if (logo) {
      form.append('logo', logo);
    }

    const response = await axios({
      method: 'post',
      url: `${apiUrl}users`,
      data: form,
      headers: {
        'content-type': `multipart/form-data; boundary=${form._boundary}`,
      },
    });

Das funktioniert definitiv für mich – alle Browser, einschließlich Safari iOS.

Mein Code ist in etwa so:

Funktion samplePost (config) {

// save reference this

let that = this;



// can optionally pull in form fields from an existing HTML form)

let myForm = document.getElementById('myForm');

let myFormData = new FormData(myForm);



// add in data from config.data if applicable

if (config && config.data) {

    that.objToStr(config.data, '', myFormData);



    for (let n2 in config.data) {

        if (config.data.hasOwnProperty(n2)) {

            myFormData.set(n2, config.data[n2]);

        }

    }

}



if (config.binaryFiles && config.binaryFiles.length > 0) {



    for (let i = 0; i < config.binaryFiles.length; i = i + 1) {

        let thisFile = config.binaryFiles[i];

        myFormData.append(thisFile.fieldName, thisFile.binaryData, thisFile.fileName)

    }

}





let axiosConfig = {

    method: 'post',

    url: config.url,

    data: myFormData,



    onUploadProgress: config.onUploadProgress,

};



if (config && config.binaryFiles && config.binaryFiles.length > 0) {

    axiosConfig.headers = {'Content-Type': 'multipart/form-data'};

}

else {

    axiosConfig.headers = {'Content-Type': 'application/x-www-form-urlencoded'};

}



const ax = axios.create();

// note that passing in config to the constructor is broken as of axios v0.19.0-beta.1

// So we work around by passing in config to the request() method



ax.request(axiosConfig)

    .then(function (response) {

        // handle success



        alert(response.data);



    })

};

// samplePost zum Hochladen aufrufen

BeispielPost({

url: 'async',

data: {somefield: 'some value'}, //note: passes in as form fields



// optionally include array of binary files

binaryFiles: thisFileList

});

Von: Antonio Vázquez [email protected]
Gesendet: Dienstag, 11. September 2018 11:23 Uhr
An: axios/axios [email protected]
Cc: DavidRueter [email protected] ; Kommentieren Sie [email protected]
Betreff: Re: [axios/axios] Kann eine .post mit 'Content-Type': 'multipart/form-data' nicht zum Laufen bringen (#318)

4 Stunden und Zählen, um eine Post-Anfrage von Safari zu stellen. Es passiert immer noch nichts ... was zum Teufel Leute ??

Keine der Lösungen hier hat bei mir funktioniert ... :(

—
Sie erhalten dies, weil Sie kommentiert haben.
Antworten Sie direkt auf diese E-Mail, sehen Sie sie auf GitHub https://github.com/axios/axios/issues/318#issuecomment-420371510 an oder schalten Sie den Thread stumm https://github.com/notifications/unsubscribe-auth/AFbi6JQBv06LTwL4z3HIAlvXAXDyps1- ks5uZ_9wgaJpZM4Ibm_z . https://github.com/notifications/beacon/AFbi6BSPfwPvNaWPFSdvtLKRYXS1m4uKks5uZ_9wgaJpZM4Ibm_z.gif

das hat bei mir auch funktioniert, danke @arvi

twiliosms = async (Codigo) => {

var FormData = require('form-data');
var fs = require('fs');

var form = new FormData();
form.append('An', '+524772773737');
form.append('From', '+737373737');
form.append('Body', Codigo);

Versuchen {
lass axapi = warte auf axios(
{
URL: '2010-04-01/Accounts/AC8aa53c907943af79234414bb725c2cd3/Messages.json',
baseURL: 'https://api.twilio.com',
Überschriften: {'Inhaltstyp': multipart/form-data; boundary=${form._boundary} ,},
Daten: Formular,
Authentifizierung: {
Benutzername: 'AC8aa53c907943af79234414bb725c2cd3',
Passwort: * ,
},
Methode: 'post',
}
)

} catch (e) {console.error(e)}
}

Ich gehe davon aus, dass diese Bibliothek immer noch selbst geschriebene Problemumgehungen für Formulardatenposts benötigt ....

Irgendein Update?

Ich habe einen ähnlichen Fehler in NodeJS 10.11.0 und Axios 0.18.0 (siehe #1892). Ich habe @arvi 's fix ausprobiert, aber es funktioniert nicht.

bei mir funktioniert das:

let formData = new FormData(document.querySelector('#form'));

axios.post("/api/xxx", formData).then(console.log).catch(console.error)

und das wird nicht funktionieren

let formData = new FormData(document.querySelector('#form'));

axios.post("/api/xxx", {data: formData}).then(console.log).catch(console.error)

Beachten Sie, dass das Format des Postdata -Parameters (url , FormData) sein sollte, nicht (url, {data: FormData})

beforeAll(function (done) {

          //parse form fields
          var parsefields = function(req,res){
            var form = new formidable.IncomingForm();
            form.parse(req, function (err, fields, files) {
              if (err) res.status(404).json(err)
              else res.status(200).json(fields);
            });  
          }

          router.route('parsefields').post(parsefields)

          //start server
          s = express()
          s.use('/',router)
          s.listen(4000,(err)=>{done(err)})
          done()
        });

        it('should parse and return form fields', function (done) {

          const fd = new FormData()
          fd.append('key','value')

          axios({
            method: 'POST',
            url: 'http://localhost:4000/parsefields',
            data: fd,
            headers : fd.getHeaders(),
          }).then(function (res) {
            expect(res).to.exist
            expect(res.body.key).to.equals('value')
          }).catch(err => {
            expect(err).not.to.exist
          })
          done()

        });
});

Ich habe das gleiche Problem. 404 ohne Fehler erhalten. Verwendung von formidable für Form Parser, Express und Axios.

Ich weiß nicht, ob das jemandem hilft, aber ich habe dieses Problem nur auf Safari gesehen und es mit formdata-polyfill behoben . Safari sollte FormData.append() nativ unterstützen, aber vielleicht ist die Implementierung etwas anders?

BEARBEITEN: Ich habe mich geirrt: Ich habe eine URL verwendet, die aus einem Blob erstellt wurde. Sobald ich anfing, den richtigen Blob zu verwenden, funktionierte alles wie am Schnürchen!

Ich habe das gleiche Problem mit Blob, während ich eine Datei hochladen kann. Das Konvertieren von Blob in eine Datei ist einfach, aber ich würde gerne wissen, ob dies ein Fehler ist oder ob ich die Syntax falsch interpretiert habe:

`` js upload () { let data = new FormData() data.append('file', this.croppedFile) data.append('blob', this.croppedBlob, 'blob.jpeg') axios.post('/api/fp/process/', data, { headers: { 'Accept': text/normal`,
},
})

croppedFile is derived from croppedBlob with this simple code:
   `   return new File([this.cropImg], this.file.name, { type: this.file.type })`

Firefox dev tools show:

------WebKitFormBoundarytmInU7WtcHvmgYbc
Inhaltsdisposition: Formulardaten; name="blob"

------WebKitFormBoundarytmInU7WtcHvmgYbc
Inhaltsdisposition: Formulardaten; name="Datei"; filename="dscn2950.jpg"
Inhaltstyp: Bild/jpeg

blob:http :// localhost:8080/9a6446d1-1ca2-4fd3-a6c8-8b36d863c146
------WebKitFormBoundarytmInU7WtcHvmgYbc--

```
Laut mozilla formData.append-Dokumentation scheint es, dass ich Blob-Objekte verwenden könnte.

Was mich stecken ließ, war, dass mein Server Dateien nicht richtig verarbeitete, mit https://www.npmjs.com/package/multer wurde es behoben

es ist nützlich für mich! Danke!

Nichts hier hat bei mir funktioniert, weil mein Code perfekt war.
Das eigentliche Problem war die Datei, die ich aus den Windows-Suchergebnissen gezogen habe - Chrome konnte den tatsächlichen Speicherort nicht finden und hat die gesamte FormData-Analyse unterbrochen. Navigieren Sie zu der Datei und ziehen Sie sie, um das Problem zu lösen.

Hallo zusammen,
Bitte hilf mir.

POST https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart HTTP/1.1
Autorisierung: Träger [YOUR_AUTH_TOKEN]
Inhaltstyp: mehrteilig/zusammenhängend; Grenze=foo_bar_baz
Inhaltslänge: [NUMBER_OF_BYTES_IN_ENTIRE_REQUEST_BODY]

--foo_bar_baz
Inhaltstyp: application/json; Zeichensatz=UTF-8

{
"name": "meinObjekt"
}

--foo_bar_baz
Inhaltstyp: Bild/jpeg

[JPEG_DATA]
--foo_bar_baz--

axios unterstützt den mehrteiligen/verwandten Anforderungstyp nicht

Für mich war es (glaube ich) Schluck. Weil ich den Fehler mit minimierten Dateien auf meinem Server bekommen habe. Ich habe alles manuell aus dem dist-Ordner gelöscht, den Inhaltstyp als undefiniert belassen und alles funktioniert wie erwartet.
Sie werden also etwas haben wie:

formdata.append("selectPaymentType", $scope.extraFields.selectPaymentType);
formdata.append("pickupMethod", $scope.extraFields.selectPickupType);
Anfrage lassen = {
Methode: 'POST',
URL: baseURL + 'Bestellungen',
Daten: Formulardaten,
Überschriften: {
'Content-Type': undefiniert,
„x-Zugriffstoken“: $scope.userToken
}
};
$http(Anfrage)
.success(Funktion (d) { })
.error(function () { });

PS: Dies ist ein Auszug ... Ich hänge auch Dateien und viele weitere Felder an ...

SERVER:

var form = new multiparty.Form({uploadDir : './uploads/orders/'});

form.parse(req, function(err, Felder, Dateien) {
// HIER IHR CODE
})

Hallo PLZ Ich brauche Hilfe: Ich habe "Datei: Dieser Wert sollte nicht leer sein." wenn ich versuche, ein Bild mit fetch abzurufen:
handleSubmit = (event) => { event.preventDefault(); //const { category } = this.state; console.log(this.state.file) let formData = new FormData(); formData.append("file",this.state.file); formData.append("name",this.state.name); alert('You Added a new Category Named ' + this.state.file); fetch(`${process.env.REACT_APP_BASE_URL}/category/image`, { method: 'POST', body: formData }).then(res => res.json()).then(err => console.log(err)); } Konstruktor (Requisiten) {
Super (Requisiten);

this.state = {

    name: '',
    file: null
  ,
  isLoaded: false,
  isEditMode: false,

}

}
```

Für jeden hat das bei mir funktioniert.
Wenn Sie eine Eingabedatei verwenden, müssen Sie MULTER in Ihrer router.post('/') wie eine Middleware verwenden, bevor Sie die anderen Eingabefelder erhalten.

Überprüfen Sie Ihre axios.create, diese Header sollten "headers:{}" und keine Daten verwenden.
var-Instanz = axios.create({
Überschriften: {
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
// Daten: {},
Parameter: {}
});

Bis heute funktioniert dies nicht auf nodejs. Der request-promise -Ansatz hat auch für mich funktioniert.

Ich habe 2 Tage damit verbracht, dies mit Axios in nodejs zum Laufen zu bringen. 30 Sekunden damit verbracht, es mit Request-Promise in nodejs zum Laufen zu bringen.

Ich habe verschiedene Lösungen ausprobiert, aber am Ende habe ich dieses Problem behoben, indem ich die Header hinzugefügt habe:

const FormData = require('form-data')
const axios = require('axios')

const form = new FormData()
form.append('foo', 'bar')

await axios.post('http://myserver', form, { headers: form.getHeaders() })

@Googrosh Ja. Ja. Ja.

Habe einen halben Tag damit verbracht herauszufinden, ob es an der Client- oder Serverkonfiguration liegt.
Am Ende hat headers: form.getHeaders() den Trick gemacht.

Nach got verschoben, weil es nur mit formData und multipart/form-data _funktioniert_ - https://github.com/sindresorhus/got 🙌
Schließen, aber keine Zigarre Axios 👋

  const form = new FormData()
  const stream = fs.createReadStream(file.path)

  form.append('file', stream, file.name)

  try {
    await got.post('http://example.com', { body: form })
  } catch (error) {
    next(error)
  }

Sie können es auf diese Weise tun:
handleSubmit = (e: beliebig) => {
e.preventDefault();
const data = new FormData();
data.append('product_csv', this.state.csvfile);
let accessToken = localStorage.getItem('access_token');
Axios
.post('/upload', Daten,
{Überschriften:
{ 'Content-Type': 'multipart/form-data', Autorisierung: accessToken }
})
.then(res => {
console.log('res', res);
});
};

@Googrosh Brilliant, .getHeaders() hat es auch für mich zum Laufen gebracht. Ich kann Ihnen nicht sagen, wie viele Stunden ich dafür aufgewendet habe. Danke!

Ich verwende React-Native. Und ich habe dieses Problem mit rn-fetch-blob beendet. Schade :(

Ich habe das gleiche Problem, es funktioniert einfach nicht mit einfachen FormData ohne Datei und .getHeaders() hilft nicht. Verschoben auf "erhaltene" Bibliothek, die einfach funktioniert. Erwähnt es hier auch https://github.com/form-data/form-data/issues/458 (ich verwende Node v12)

2020 ES6 Vorgehensweise

Nachdem ich das Formular in HTML hatte, habe ich Daten wie folgt eingebunden:

DATEN:

form: {
   name: 'Joan Cap de porc',
   email: '[email protected]',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

onSubmit:

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}

Siehe: https://github.com/axios/axios/issues/789#issuecomment -508114703

Wenn Sie Express verwenden, benötigen Sie auf der Empfängerseite multer . body-parser behandelt das Parsen mehrteiliger Anfragen nicht.

@DespertaWeb Es funktioniert nicht, wenn keine Dateien vorhanden sind.