美文网首页web前端
axios发送formdata请求

axios发送formdata请求

作者: 姜治宇 | 来源:发表于2020-06-23 13:56 被阅读0次

axios 默认是 Payload格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。
Payload和Form Data的主要设置是根据请求头的 Content-Type 的值来的:
Payload    Content-Type: 'application/json; charset=utf-8'
Form Data   Content-Type: 'application/x-www-form-urlencoded'
实现方法:

axios({
   method: 'post',
   url: 'http://localhost:8080/login',
   data: {
      username: obj.username,
      password: obj.passwd
   },
   transformRequest: [
      function (data) {
         let ret = ''
         for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
         }
         ret = ret.substring(0, ret.lastIndexOf('&'));
         return ret
      }
    ],
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
    }
})

我们也可以利用拦截器进行全局配置:

import axios from 'axios'
import qs from 'qs'
 
// 实例对象
let instance = axios.create({
  timeout: 3000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
 
// 请求拦截器
instance.interceptors.request.use(
  config => {
    config.data = qs.stringify(config.data) // 转为formdata数据格式
    return config
  },
  error => Promise.error(error)
)

其中 qs 模块是安装 axios 模块的时候就有的,不用另行安装,通过 import 引入即可使用。

相关文章

  • axios发送formdata请求

    axios 默认是 Payload格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我...

  • axios请求发送formData对象

    今天在做一个文件上传功能时,遇到一个问题,把前端用el-upload上传的file发送给后端,像往常一样用axio...

  • vue项目配置跨域

    在config文件夹下的index文件里 axios发送post请求,传formdata参数 要传递不同类型的参数...

  • 关于http请求

    axios的post请求:1.formdata数据格式 2.json数据格式 axios的get请求:

  • axios 代理服务器

    npm i axios 下载 import axios from 'axios' 引入 发送请求axios请求 跨...

  • axios

    axios axios 是一个专注于网络请求的库! axios 的基本使用:繁 发送get请求: 发送post请求...

  • 5.axios框架的基本使用

    axios框架支持多种请求方式向服务器发送请求数据。 tips: axios(config)默认发送的是get请求...

  • vue中发送jsonp请求

    在vue中我们一般都使用axios发送请求,但axios不支持发送jsonp类型的请求。要发送jsonp请求的话需...

  • axios post formdata请求

    axios 默认是 Payload格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我...

  • 六、Vue.js

    一、发送AJAX请求 1.简介 2,使用axios发送ajax请求 2.1安装axios并引入 2.1基本用法 3...

网友评论

    本文标题:axios发送formdata请求

    本文链接:https://www.haomeiwen.com/subject/ytqhfktx.html