vue axios post请求传递 FormData 类型参数

参考链接:

axios 上传file文件遇到的坑, no multipart boundary was found

axios 封装使用、拦截特定请求、判断所有请求是否加载完毕

前端请求方法中

      const formData = new FormData()

      formData.append('role', 1)
      formData.append('excelFile', fileObj)

      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      const { data: res } = await this.$http.post('admin/user/add', formData, config)

需要设置请求头的 Content-Type 为 multipart/form-data (我解决问题查的有很多文章说不需要设置,我试过了没用,不设置就是自动添加默认的类型,而不是我们要的 FormData)

注意:不要序列化 formData ,post请求需要序列化(通常用qs.stringify()),但用post请求传 FormData 不需要

如果序列化了 formData ,后端接收的参数就会为null(这个问题弄了我半天,才发现是序列化的问题)

附赠:判断axios请求数据是否为formData类型还是普通Object

后端接收参数

@PostMapping("/admin/user/add")
@ResponseBody
public Map<String, Object> addUserByExcel(@ModelAttribute UserExcelVO userExcelVO) throws Exception {

}

后端用 java对象 接收参数

注意:跨域问题

  • 5
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 在 Vue 中使用 axiospost 请求发送 FormData,可以这样做: 1. 安装 axios: ``` npm install axios ``` 2. 在组件中使用 axios 发送请求: ``` <template> <div> <form> <input type="file" ref="fileInput" @change="upload"/> </form> </div> </template> <script> import axios from 'axios'; export default { methods: { upload() { let input = this.$refs.fileInput let file = input.files[0] let formData = new FormData() formData.append('file', file) axios.post('/server/upload', formData).then(response => { console.log(response.data) }) } } } </script> ``` 这样就可以使用 axiospost 请求发送 FormData 了。 ### 回答2: Vue是当前最为热门的前端框架之一,它提供了许多方便、高效的功能,尤其是它的网络请求模块axios。而在Vue中使用axios进行POST请求传递formdata数据,具体的步骤和注意事项如下: 首先,在Vue项目中引入axios: ``` import axios from 'axios'; ``` 接着,在代码中使用axios调用后端接口: ``` let formData = new FormData(); // 创建一个formdata对象 formData.append('name', '张三'); // 将需要传递的表单数据append到formdata对象中 formData.append('age', '18'); axios.post('/api/user', formData).then(response => { // 请求成功后的处理 }).catch(error => { // 请求失败后的处理 }); ``` 上述代码中,我们创建了一个FormData对象formData,然后使用append方法将需要传递的表单数据添加到formData中。接着通过axios.post方法对后端接口发起POST请求,并传递formData对象作为请求数据,最后对请求成功和失败的情况进行处理。 需要注意的是,在使用axios传递FormData数据时需注意以下几点: 1. 在使用FormData创建表单数据时,如果数据的属性名为中文或特殊字符,则需要进行encodeURIComponent编码后再进行传递。 2. 传递表单数据时需要设置请求头的`Content-Type`为`multipart/form-data`。 3. 如果需要同时传递文件和其他表单数据,可以使用FormData对象添加文件,但需要在请求头中添加`Content-Type`为`multipart/form-data`的标识。 4. 服务器接收到的POST请求体需要进行解析,一般使用`body-parser`中间件或使用`multer`中间件来进行解析。 总之,Vue中使用axios传递formdata数据非常方便,只需要创建FormData对象,通过append方法添加表单数据,然后通过axios.post方法传递即可。同时需要注意编码问题和请求头设置,以确保数据传递成功。 ### 回答3: 在Vue中使用axios发送POST请求传递FormData数据,需要进行如下步骤: 1. 安装axios和qs 在项目根目录下执行以下命令安装axios和qs: ``` npm install axios qs --save ``` 2. 在vue组件中引入axios和qs 在需要使用POST请求vue组件中引入axios和qs,并定义接口地址和请求所需参数: ``` import axios from 'axios'; import qs from 'qs'; const url = 'http://xxxxxxx'; const params = new FormData(); params.append('username', 'hello'); params.append('password', 'world'); ``` 3. 发送POST请求FormData(key、value形式)方式发送POST请求: ``` axios.post(url, params) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); ``` 如果请求参数是JSON格式,则可以直接传入JSON对象: ``` axios.post(url, {username: 'hello', password: 'world'}) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); ``` 需要注意的是,当POST请求的Content-Type设置为multipart/form-data时,axios自动将请求头设置为Content-Type:multipart/form-data,且不会对请求进行序列化处理。因此,参数需要使用FormData来包装处理。 以上就是在Vue中使用axios发送POST请求传递FormData数据的步骤,希望可以提供帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值