Wie übergebe ich FormData mit Axios an einen Dienst in Angular?

Daten an den Dienst in Axios übergeben

Problem:

In einer Angular-Anwendung haben Sie ein Formular, das dies tun muss mit Axios an einen Dienst übermittelt werden soll und Sie den _boundary-Header auf den Wert der _boundary-Eigenschaft des Formulars setzen möchten. Sie können jedoch nicht über die Axios-Instanz auf die Formulardaten zugreifen.

Lösung:

Standardmäßig legt Axios den Content-Type-Header für bestimmte Anfragen automatisch fest Körperformate, einschließlich FormData. Wenn Sie eine FormData-Instanz als Anforderungstext übergeben, setzt Axios den Content-Type-Header automatisch auf multipart/form-data und verarbeitet Mime-Grenztokens für Sie.

Hier sind die Schritte, die Sie in Ihrem Code befolgen müssen:

1. Versenden Sie die Formulardaten in Ihrem Komponente:

<code class="js">//component.js

const form = new FormData();

form.append('email', '[email protected]')
form.append('password', '12121212')

dispatch(FetchLogin.action(form))</code>

2. Bereiten Sie den API-Aufruf in Ihrem Dienst vor:

<code class="js">//loginService.js

import api from '@/Services'

export default async form => {
  const response = await api.post('user/login/', form)
  return response.data
}</code>

3. Nutzen Sie den Dienst in Ihrem Axios Beispiel:

<code class="js">//Services/index.js

import axios from 'axios'
import { Config } from '@/Config'

const instance =  axios.create({
  baseURL: Config.API_URL,
})

instance.post('fetch-login', { form })</code>

Durch Übergabe des Formularobjekts als Formulareigenschaft in der Nutzlast des Anforderungstexts verarbeitet Axios automatisch den Content-Type-Header und setzt ihn auf multipart/form-data mit den entsprechenden MIME-Grenztokens. Sie müssen nicht direkt auf die Eigenschaft form._boundary zugreifen.

Das obige ist der detaillierte Inhalt vonWie übergebe ich FormData mit Axios an einen Dienst in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!