/**
* axios的安装
* 本地引入,或者cdn引入 <script src="js/axios.min.js"></script>
* 或者npm 安装 npm install axios --save-dev
* 引入: import axios from 'axios'
* 属性化: Vue.prototype.$axios = axios 以后页面即可使用this.$axios调用axios对象
* 如果不设置 Content-Type ,默认为application/x-www-form-urlencoded方式提交数据
* 当Conent-Type 设置为application/json时,就是作为json对象提交数据
* 也可以通过格式序列化进行转化
* 当请求数据格式为data时,作为json对象传递参数,参数类型:Request Payload
* 当请求数据格式为params时,作为form data方式提交数据,参数类型:Query String Paramters
*/
this.$axios({
// 请求类型 post / get
method: 'post',
// 请求地址
url: '',
// 参数对象
params: {},
// 请求头
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((res) => {
console.log('result', res)
}).catch((err) => {
console.log('error', err)
})
/**
* 另一种简便的调用方法
*/
this.$axios.post('https://bot.4paradigm.com/v1/login',{
username: '13277989731',
password: '123456'
}).then((res) => {
console.log('result', res)
}).catch((err) => {
console.log('error', err)
})
实例一:
// 请求参数
let param = new FormData()
// file为上传的文件对象
param.append('file', this.file)
// config为发送请求的配置信息,包括请求头,请求超时时间等
let config = {
headers: { 'Content-Type': 'multipart/form-data' },
timeout: 1000 * 20
}
// 请求主体
axios.post(this.uploadFileUrl, param, config).then(res => {
// 请求返回结果
if (res.data.flag === 'true') {
this.$Message.success('导入成功!')
// 成功返回后将file对象置空
this.file = null
} else {
this.$Message.error(res.data.msg)
}
})
实例二:
// config为请求配置信息
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 请求参数
let formData = new FormData()
// 此处上传的文件为通过vueCropper处理后获取的图片data对象
formData.append('file', data, this.fileName + '.png')
// 除了文件对象外可以通过append添加其他额外请求参数
formData.append('userId', this.userId)
axios.post(this.actionUrl, formData, config)
.then((res) => {
this.$Message.success('图片上传成功!')
})
.catch(() => {
this.$Message.warning({
content: '图片上传出错,请稍后重试'
})
})