vue 使用axios

 一、下载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)
		// 		}
	// 	})
},