在ElementUI上传组件el-upload中设置header
在vue项目中我们发送ajax请求一般都会使用axios，并在axios中设置axios.defaults.baseURL，请求的基本地址，并在请求拦截器中设置headers
axios.interceptors.request.use(config=>{
? NProgress.start();
? // 发送请求需带上token
? config.headers.Authorization=window.sessionStorage.getItem("token")
? return config;
})
使用el-upload上传组件时，action 为必选参数，上传的地址。
但此时我们为action填写地址不能不写基本地址而仅写upload，要写完整的地址。
这是因为el-upload上传组件在上传发送请求时，不会去使用我们设置的axios，而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。
那有时在上传时会报出错误，例如‘无效token’，这是因为我们没有为此上传请求设置请求头部。el-upload组件有一个属性headers ，设置上传的请求头部
?<el-upload ? ? ? ? ? ? ? action="http://127.0.0.1:8888/api/private/v1/upload" ? ? ? ? ? ? ? :headers="headerObj" ? ? ? ? ? ? ? :on-preview="handlePreview" ? ? ? ? ? ? ? :on-remove="handleRemove" ? ? ? ? ? ? ? :on-success="handleSuccess" ? ? ? ? ? ? ? list-type="picture" ? ? ? ? ? ? > ? ? ? ? ? ? ? <el-button size="small" type="primary">点击上传</el-button> ? ? ? ? ? ? ? <div slot="tip" class="el-upload__tip"> ? ? ? ? ? ? ? ? 只能上传jpg/png文件，且不超过500kb ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </el-upload>
在data中定义headerObj
headerObj: {
? ? ? ? Authorization: window.sessionStorage.getItem("token"),
? ? ? },
element-ui中的upload组件使用总结
element-ui官网
使用upload组件：
<el-upload ? ?class="upload-demo" ? ?ref="uploadFile" ? ?:on-change="beforeUpload" ? ?:action="uploadUrl" ? ?:headers="myHeader" ? ?:on-remove="handleRemove" ? ?:before-remove="beforeRemove" ? ?:limit="1" ? ?:auto-upload="false" ? ?:on-exceed="handleExceed" > <el-button size="small" type="primary">选择文件</el-button>action : 是请求后端接口的路径 （必填的） header : 是配置请求头的 / 在此处带了token on-change : 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 on-remove : 是文件列表中移除文件时执行的 before-remove : 删除文件之前执行的，可以用作提示用户二次确认删除 limit : 是上传文件的个数 auto-upload : 是控制是否自动上传的 on-exceed : 上传文件个数超过限制的时候执行的
此处添加的ref是为了在用户点击关闭后清空列表
通过clearFiles方法，这也是element提供的。
addDialogClose(){
? this.$refs.ruleForm.resetFields();
? this.addClassroomShow = false
? this.$refs.upload.clearFiles();
}
在使用时最坑的地方就是action属性不能及时响应数据跟新，总是晚一步。
使用了before-upload、on-progress都不行，数据已经更改，但是action里还是旧的。
研究一下午：
将auto-upload属性设置为false,
然后使用了on-change
在on-change钩子中，去判断文件后缀，来确定文件类型，来确定调用不同的接口
然后通过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()
? })
},
此时就ok了！
如果action是死路径就不需要考虑这些问题了。如果是动态的，就让它异步，或给它加个延时器。
总结：upload组件已经封装的很好了，只是action属性是必填的，有点坑。以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
查看更多关于如何在ElementUI的上传组件el-upload中设置header的详细内容...