经验笔记 – 02_axios请求发送(文件上传FormData传参)

  • Post author:
  • Post category:其他


欢迎访问笔者个人技术博客:

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('后台服务出问题,请联系技术人员')
})



版权声明:本文为weixin_43508544原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。