设置axios格式为form-data

2024年3月17日 106次阅读 来源: 前端江太公

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

在后端与前端约定好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
    }]
})
    原文作者：前端江太公
    原文地址: https://blog.csdn.net/ZiChen_Jiang/article/details/107143048
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞