设置axios格式为form-data

简介: 设置axios格式为form-data

最近在参与一个项目过程中遇到一个问题,相信大部分人都遇到过:

在后端与前端约定好application/json格式传递数据时,因为后台是go强类型语言,在定义api接口时,某些字段要求是整型类型,但是对于前端来说输入框或者从url中的search取到的参数都是字符串,不得不进行前端类型转换。


咋一看,对于接口参数比较少的api前端转换没有什么,但是对于一般的交互复杂,参数比较多的接口,要对大部分参数进行类型转换就是一种吃力不讨好的活。好在后端同学还支持另一种的前后端数据交互格式,即multipart/form-data。通过该格式后端取到前端传递的数据就是数字了(即使前端传递的是字符串),而不像json格式获取的是字符串。这样,就不需要额外对前端获取的数据进行特殊转换了。下面就来说说form-data。

multipart/form-data是基于post方法来传递数据的,并且其请求内容格式为Content-Type: multipart/form-data,用来指定请求内容的数据编码格式。

const instance = axios.create({
    baseURL: "https://api.it120.cc",
    //设置axios为form-data
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    transformRequest: [function (data) {
        let ret =''for (let it in data) {
            ret += encodeURIComponent(it) +'='+ encodeURIComponent(data[it]) +'&'        }
        return ret
    }]
})
目录
相关文章
|
7月前
|
JavaScript API
|
6月前
|
API
使用axios发送请求的格式是什么?示例代码
使用axios发送请求的格式是什么?示例代码
33 0
|
5月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
使用axios发送请求的格式是什么
使用axios发送请求的格式是什么
35 0
|
7月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
7月前
|
XML 数据格式
AXios接受XML格式的webservice并解析成数据格式
AXios接受XML格式的webservice并解析成数据格式
152 2
|
7月前
Axios有哪些常用的方法?格式是什么?写出两种即可
Axios有哪些常用的方法?格式是什么?写出两种即可
vue3中axios的格式及安装依赖
vue3中axios的格式及安装依赖
112 0
|
JavaScript 前端开发
Vue —— Axios 发送请求(常用格式)
Vue —— Axios 发送请求(常用格式)
165 0
|
2月前
|
资源调度 JavaScript