Wie man eine Datei (pdf, doc) im Axios-Dienst zusammen mit JSON-Daten posten kann

Question

Ich möchte PDF/Docs-Dateien zusammen mit anderen JSON-Daten im Axios-Dienst senden. Ich habe verwiesen (Ajax post a file from a form with Axios), aber es sendet nur Datei ohne JSON-Daten.

field_value: {}, // here it shows empty object,but it should show File Object 
field_type: "file_upload", 
is_file_upload: true 

}

wenn ich das Objekt Konsole vor Anforderung sendet, als es mir ein Dateiobjekt in Formdata zeigt(), aber es leere Klammern zeigen, wenn sie sehen, daß es in Post-Anforderung ist.

Answer 1

Sie können etwas tun:

//HTML  
<input type="file" @change="onFileChanged" :multiple="multiple" :accept="accept" /> 

Dann wird Ihr JavaScript-Code der Datei-Eingabe zu handhaben:

onFileChanged(event) { 
    var files = event.target.files || event.dataTransfer.files; 
    if (!files.length) { 
    return; 
    } 

    var formData = new FormData(); 

    // Add the File object to the formdata 
    if (this.multiple) { 
    formData.append("files", files); 
    } else { 
    formData.append("file", files[0]); 
    } 

    // Add your data... 
    formData.append("data", myData); 
} 

uploadDocument(formData) { 
    return Axios.post('/api/documents', formData, { 
    headers: { 
     'Content-Type': 'multipart/form-data' 
    } 
    }); 
} 

Verwenden Sie die Formulardaten, die Sie aus der Datei Eingabetyp erhalten an das Backend zu schicken .

Dann können Sie etwas tun:

uploadDocument(formData).then((response) => { 
    console.log('data sent'); 
}) 

Hoffe, es hilft.