axios发送post请求,提交图片类型表单数据

本文介绍了一个基于Vue.js的文件上传组件实现方法。该组件通过DOME接口与后端交互,并利用axios发送multipart/form-data格式的POST请求。文章详细展示了如何使用FormData对象封装文件数据,并在前端实现文件上传的功能。

DOME

<input type="file" @change="upload" ref="upload">

接口

const userUploadAtt = (File,config) => axios.post("接口",File,config)

处理数据

let input = this.$refs.upload  
创建一个空的FormData对象   
let data = new FormData();
使用FormData.append来添加键/值对到表单里面;
data.append('file', input.files[0]);
upload(){
    userUploadAtt(data,{headers: {'Content-Type': 'multipart/form-data'}}).then((response)=>{
       this.headPhoto = response.data[0].msg.url;
    }).catch(()=>{

    })
}

注意:

如果
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
post请求时候表单上传不需要引入qs.stringify()
使用 axios 发送 post 请求提交数据有以下几种常见方式: ### 以 JSON 格式提交数据 当后端期望接收 JSON 格式的数据时,可直接传递一个对象作为请求数据,因为 axios 请求默认的是 `application/json` 格式。示例代码如下: ```javascript import axios from 'axios'; axios({ url: '请求的地址', method: 'post', data: { name: '小明', age: 20 } }).then(result => { // 对服务器返回的数据进行后续处理 console.log(result.data); }).catch(error => { console.error(error); }); ``` 这种形式也是常见的 axios 通过 POST 方法提交数据的形式 [^3]。 ### 以表单格式提交数据 若后端需要的是表单提交方式,即 `content-type` 为 `application/x-www-form-urlencoded`,需要将数据进行序列化。可以使用 `qs` 库来完成序列化。示例代码如下: ```javascript import axios from 'axios'; import qs from 'qs'; const data = { name: 'edward', age: 25 }; axios.post('请求的地址', qs.stringify(data), { headers: { 'content-type': 'application/x-www-form-urlencoded' } }).then(result => { console.log(result.data); }).catch(error => { console.error(error); }); ``` 若后端接收的是(表单)字符串类型post 的 `headers` 需设置 `{ 'content-type': 'application/x-www-form-urlencoded' }`,传输给后端的数据就形如 `'name=edward&age=25'` [^4]。 ### 提交文件 在 React 中使用 Axios 发起 POST 请求提交文件,可使用 `FormData` 对象。示例代码如下: ```javascript import axios from 'axios'; const formData = new FormData(); formData.append('file', file); // file 是文件对象 axios.post('请求的地址', formData).then(res => { if (res && res.status === 200) { // 成功时的回调 console.log('文件上传成功'); } else { // 失败时的回调 console.error('文件上传失败'); } }).catch(error => { console.error(error); }); ``` 这种方式只需提供 URL 与参数即可 [^2]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值