经验笔记 - 02_axios请求发送（文件上传FormData传参）

欢迎访问笔者个人技术博客： http://rukihuang.xyz/

axios请求发送

0 抽取baseURL

• Vue项目可在项目根目录的main.js文件中抽取baseURL

axios.defaults.baseURL = 'http://localhost:8080/eduonline'

1 get请求

• 多个参数传递，一定是params表示

1.1 代码示例1

axios({
    method: 'get',
    url: 'page/getPageInfo',
    headers: {
        'content-type': 'application/json',
    },
    params: {
        pos: this.position,
    },
}).then(res => {
    console.log('成功了')
    console.log(res)
    )
}, err => {
    console.log('错误了')
    console.log(err)
})

1.2 代码示例2

//可配置参数的方式
axios.get('/user',{
    params:{
        ID:12345
    }
}).then(res => {
    console.log('成功了')
    console.log(res)
    )
}, err => {
    console.log('错误了')
    console.log(err)
})

//或者直接在url后拼接参数
axios.get('/user?id=123')
    .then(res => {
        console.log('成功了')
        console.log(res)
        )
    }, err => {
        console.log('错误了')
        console.log(err)
    })

2 post请求

• post传递参数，必须用data

2.1 代码示例

//以json格式传入参数
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
 .then(res => {
        console.log('成功了')
        console.log(res)
        )
    }, err => {
        console.log('错误了')
        console.log(err)
    })


//发送post请求
axios({
    method: 'post',  //请求方式，默认是get请求
    url:'/user/12345', //地址
    data:{ //参数
        firstName: 'simon',
        lastName: 'li'
    }
});

2.1 后端接收参数为null，可以用FormData传递

• 项目中发现前端post请求传参，后端接收不到，均为null值，此时可以通过FormData进行传参

let formData = new FormData()
formData.append('position', this.position)
formData.append('docServerFileName', this.docServerFileName)
formData.append('socServerFileName', this.socServerFileName)
formData.append('vidServerFileName', this.vidServerFileName)
formData.append('posResponsibility', this.posResponsibility)
axios({
    method: 'post',
    url: 'page/submitPageInfo',
    headers: {
        'content-type': 'application/json',
    },
    data: formData,
}).then(res => {
    console.log('成功了')
    this.$Message.success('提交成功')
}, err => {
    console.log('错误了')
    console.log(err)
    this.$Message.error('提交失败，请联系技术人员')
})

2.3 上传文件需修改content-type

• 上传文件，headers里的content-type需改为multipart/form-data

let formData = new FormData()
formData.append('file', this.file)
axios({
    method: 'post',
    url: 'positionLearning/videoUpload/uploadVideo',
    headers: {
        'content-type': 'multipart/form-data',
    },
    data: formData,
}).then(res => {
    console.log('成功了')
    console.log(res)
}, err => {
    console.log('错误了')
    console.log(err)
    this.$Message.error('后台服务出问题，请联系技术人员')
})