如何在ElementUI的上传组件el-upload中设置header

在vue项目中我们发送ajax请求一般都会使用axios，并在axios中设置axios.defaults.baseURL，请求的基本地址，并在请求拦截器中设置headers

import { getToken } from '@/libs/util'

// 请求拦截
axios.interceptors.request.use(configInfo => {
	if(!configInfo.noToken) {
		// 发送请求需带上token
		let token = getToken()
		config.headers.Authorization = token		
	}
    return configInfo
})

使用 el-upload上传组件时，action 为必选参数，上传的地址。

但此时我们为action填写地址不能不写基本地址而仅写upload，要写完整的地址。

这是因为el-upload上传组件在上传发送请求时，不会去使用我们设置的 axios，而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。

那有时在上传时会报出错误，例如“无效token”，这是因为我们没有为此上传请求设置请求头部。el-upload 组件有一个属性 headers ，设置上传的请求头部。

<el-upload
	ref="uploadFile"
	:action="uploadUrl"
	:headers="headerObj"
	accept=".xls,.xlsx,.jpg,.png,.jpeg,.bmp,.doc"
	:before-upload="beforeUpload"
	:on-change="handleChange"
	:on-remove="handleRemove"
	:on-success="handleSuccess"
	:file-list="fileList"
>
	<el-button size="small" type="primary">点击上传</el-button>
	<div slot="tip" class="el-upload__tip">只能上传图片、word、excel文件</div>
</el-upload>

在data中定义headerObj

data() {
 	return {
 		uploadUrl: process.env.VUE_APP_BASE_URL + 'api/common/uploadFile'
 		headerObj: {
			Authorization: getToken()
		},
		fileList: []
 	}
 }

使用时需要注意的坑：如果action是动态的，action属性不能及时响应数据更新，总是晚一步。
解决方法：需要让它异步，或给它加个延时器。

1. 将auto-upload属性设置为false,

2. 使用on-change，在on-change钩子中，去判断文件后缀，来确定文件类型，来确定调用不同的接口

3. 通过ref属性去执行上传

beforeUpload(file) {
	if(/\.(mp4|m3u8|rmvb|avi|swf|3gp)$/.test(file.name)) {
		this.ruleForm.uploadUrl = this.vidoeUploadUrl
	} else {
		this.ruleForm.uploadUrl = this.fileUploadUrl
	}
	this.$nextTick(()=>{
		this.$refs.uploadFile.submit()
	})
}