文件上传模块之axios二次封装，前后端通信常用的数据格式（一）

简单的准备工作（这里不过多赘述过程，需要读者有vue, node基础）：

1. 装包，只安装框起来的，其他是 cli 自己创建的

2. 搭建node后台，启动后台服务器

3. Postman测试接口：

4. 后台新建一个upload 文件夹，用来存放前端上传过来的文件

Axios 二次封装：

客户端Public 目录下，新建js 文件夹，新建instance.js 文件

导入包：

import 'axios' 
import 'qs'
import 'spark-md5'

再新建upload.js 将要实现的功能都在这里实现

instance.js 二次封装axios的代码：

//为了防止在复用过程中，我们写的代码覆盖之前写的，使用axios提供的方法单独创建一个实例
let instance = axios.create();

/* 把axios 发送请求的公共信息进行提取*/
instance.defaults.baseURL = 'http://127.0.0.1:3007';
instance.defaults.headers['Content-Type'] = 'multipart/form-data';
instance.defaults.transformRequest = (data, headers) => {
	const contentType = headers['Content-Type'];
	if ( contentType === 'application/x-www-form-urlencoded') {
		return Qs.stringfy(data);
	} 
	return data;
}

//先走拦截器，再走 .then
instance.interceptors.response.use(response => {
	return response.data
}, reason => {
	//统一做失败的提示词处理
	return Promise.reject(reason);
})

upload.js 代码：

(function() {
	//请求请求主体传递给服务器的数据格式：FormData或者x-www-form-urlencoded
	//也可能是一个JSON 字符串或者普通文本字符串或者Buffer...
	
	//使用formdata
	let fm = new FormData;
	fm.append('file', '')
	fm.append('filename', '')
	
	instance.post('/api/home', fm).then(data => {
		
	}).catch(reason => {
		
	});
	
	//xxx=xx&xxx=xx,这种格式需要用户单独指定
	instance.post('/api/home', {
		file: '',
		filename: ''
	}, {
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		}
	})
})