一、下载axios
npm install axios
二、封装index.js
// index.js
import axios from 'axios'
import Vue from 'vue'
import session from '@/utils/session' // 引入sessiontorage组件
import {
Message
} from 'element-ui'
// 设置接口路径
let appName = session.get('appName')
let url = process.env.NODE_ENV === 'development' ? 'http://本机ip:9090' : 'http://本机ip:9091'
url = url + '/' + appName //接口统一添加标识
let http = axios.create({
baseURL: url,
timeout: 8000, // 请求延时时间
responseType: 'json', // 请求数据类型包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
params: {}, // 无论请求为何种类型,在params中的属性都会以key=value的格式在url中拼接
data: null, //post请求的数据
})
console.log('当前环境是:' + process.env.NODE_ENV)
// 添加请求拦截器
http.interceptors.request.use(
config => {
let token = session.get('token')
if (token) {
config.headers.Authorization = 'Bearer ' + token // 将token设置成请求头
}
return config
},
error => {
return Promise.reject(error)
}
)
// 添加响应拦截器
http.interceptors.response.use(
res => {
// 接口报错统一拦截
let {
status,
msg
} = res.data
if (status === 1) {
Message.error(msg)
}
return res
},
error => {
if (error && error.response) {
let {
status
} = error.response.data
if (status === 400) {
Message.error('服务异常')
}
if (status === 404) {
Message.error('页面请求地址错误')
}
if (status === 500) {
Message.error('服务异常')
}
if (status === 'canceled') {
Message.error('服务异常')
}
}
// 对响应错误做点什么
if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
Message.error('请求超时')
}
return Promise.reject(error)
}
)
// 阻止启动生产消息,常用作指令
Vue.config.productionTip = false
Vue.prototype.$httpurl = url
Vue.prototype.$api = {
/** 后台接口 **/
// get方法
Login: params => {
return http.get(`/api/Login`, {
params: params
})
},
//post方法
FileUpload: data => {
return http.post(`/api/FileUpload`, data)
},
}
三、使用
this.$api.Login(data).then(res => {
console.log(res)
})
<el-form-item label="单文件上传" prop="PATH">
<el-upload class="upload-demo" drag action="" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="1" :http-request="handleUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</el-form-item>
handleExceed(file, fileList) {
console.log(file, fileList);
this.$message.warning(`当前限制选择 1 个文件,请删除后重选!`);
},
handleRemove(file, fileList) {
console.log(file, fileList);
this.form.PATH = ""
},
handleUpload({
file
}) {
console.log(file)
let formData = new FormData()
formData.append("file", file)
this.$api.FileUpload(formData).then(res => {
console.log(res)
res = res.data
if (res.success) {
this.form.PATH = res.response.PATH
this.$message({
message: '上传成功',
type: 'success'
})
} else {
this.$message.error('上传失败:' + res.msg)
}
})
// 下面的方法和上面的等价
// let config = {
// method: 'post',
// url: this.$httpurl + '/api/FileUpload',
// data: formData,
// headers: {
// 'Content-Type': 'multipart/form-data'
// }
// }
// let token = session.get('token')
// if (token) {
// config.headers.Authorization = 'Bearer ' + token // 将token设置成请求头
// }
// axios(config).then(res => {
// console.log(res)
// res = res.data
// if (res.success) {
// this.form.PATH = res.response.PATH
// this.$message({
// message: '上传成功',
// type: 'success'
// })
// } else {
// this.$message.error('上传失败:' + res.msg)
// }
// })
},