首頁  >  文章  >  web前端  >  如何使用 Axios 將 FormData 傳遞到 Angular 中的服務?

如何使用 Axios 將 FormData 傳遞到 Angular 中的服務?

Linda Hamilton
Linda Hamilton原創
2024-11-03 22:25:30241瀏覽

How to Pass FormData to a Service in Angular Using Axios?

將資料傳遞到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>
  1. 在您的服務中準備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>
  1. 在Axios 實例中使用服務:
  2. <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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn