Axios를 사용하여 FormData를 Angular 서비스에 전달하는 방법은 무엇입니까?

Axios의 서비스에 데이터 전달

문제:

Angular 애플리케이션에는 다음을 수행해야 하는 양식이 있습니다. Axios를 사용하여 서비스에 제출하고 _boundary 헤더를 양식의 _boundary 속성 값으로 설정하려고 합니다. 그러나 Axios 인스턴스 내에서는 양식 데이터에 액세스할 수 없습니다.

해결책:

기본적으로 Axios는 특정 요청에 대해 Content-Type 헤더를 자동으로 설정합니다. FormData를 포함한 본문 형식. FormData 인스턴스를 요청 본문으로 전달하면 Axios는 자동으로 Content-Type 헤더를 multipart/form-data로 설정하고 MIME 경계 토큰을 처리합니다.

코드에서 따라야 할 단계는 다음과 같습니다.

1. 구성 요소에서 양식 데이터 전달:

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

const form = new FormData();

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

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

2. 서비스에서 API 호출 준비:

<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. Axios 인스턴스에서 서비스를 사용합니다.

<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>

양식 개체를 요청 본문 페이로드의 form 속성을 사용하면 Axios는 자동으로 Content-Type 헤더를 처리하고 적절한 MIME 경계 토큰을 사용하여 multipart/form-data로 설정합니다. form._boundary 속성에 직접 액세스할 필요는 없습니다.

위 내용은 Axios를 사용하여 FormData를 Angular 서비스에 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!