如何在ElementUI的上传组件el-upload中设置header
目录
- 在ElementUI上传组件el-upload中设置header
- element-ui中的upload组件使用总结
在ElementUI上传组件el-upload中设置header 在vue项目中我们发送ajax请求一般都会使用axios,并在axios中设置axios.defaults.baseURL,请求的基本地址,并在请求拦截器中设置headers
axios.interceptors.request.use(config=>{NProgress.start(); // 发送请求需带上tokenconfig.headers.Authorization=window.sessionStorage.getItem("token")return config; })
使用el-upload上传组件时,action 为必选参数,上传的地址。
但此时我们为action填写地址不能不写基本地址而仅写upload,要写完整的地址。
这是因为el-upload上传组件在上传发送请求时,不会去使用我们设置的axios,而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。
【如何在ElementUI的上传组件el-upload中设置header】那有时在上传时会报出错误,例如‘无效token’,这是因为我们没有为此上传请求设置请求头部。el-upload组件有一个属性headers ,设置上传的请求头部
点击上传 只能上传jpg/png文件,且不超过500kb
在data中定义headerObj
headerObj: {Authorization: window.sessionStorage.getItem("token"),},
element-ui中的upload组件使用总结 element-ui官网
使用upload组件:
选择文件
action
: 是请求后端接口的路径 (必填的)header
: 是配置请求头的 / 在此处带了tokenon-change
: 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用on-remove
: 是文件列表中移除文件时执行的before-remove
: 删除文件之前执行的,可以用作提示用户二次确认删除limit
: 是上传文件的个数auto-upload
: 是控制是否自动上传的on-exceed
: 上传文件个数超过限制的时候执行的
通过clearFiles方法,这也是element提供的。
addDialogClose(){this.$refs.ruleForm.resetFields(); this.addClassroomShow = falsethis.$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组件如何实现自定义上传
- rocketmq多个消费者消费一个消息_Rocketmq如何保证消息不丢失,如何保证消息不被重复消费...
- 钛极客|直播如何更智能?卡多希发布一鸣AMAZE等直播生态产品 | 科技前线
- 投稿|半导体下行周期,硅片厂商如何摆脱寒气?
- 线程池是怎么回收空闲线程的(如果你认为有定时任务,那你就错了!)
- ApacheCon|ApacheCon Asia 2022 精彩回顾 | 如何让更多人从大数据中获益()
- 投稿|Nreal、Rokid们,如何摆脱“配件”命?
- 投稿|零跑IPO:研发投入不足,如何画圆全域自研的大饼
- 专升本_语文|如果你想专升本那就一定要看的专升本语文_文学常识完整版(四)
- 电脑组装教程(怎么看电脑配置(教你如何查看电脑配置))