vue element-ui upload 实现带token上传
<el-upload
class="upload-demo"
:data ="uploadData"
:headers = "headers"
action="http://test/post"
:show-file-list="false"
style="float: right;"
list-type="picture"
accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp"
:on-success="upSuccess"
multiple>
<el-button size="small" class= "variantBtn" type="text">{{$t("edit.addImg")}}</el-button>
</el-upload>
:header 在里面写要携带的token的参数,:data 是携带一同传过去的数据的参数
import util from '@/libs/util.js'
export default {
data () {
return {
uploadData: {
type: 1
},
headers: {
Authorization: util.cookies.get('token') //从cookie里获取token,并赋值 Authorization ,而不是token
},
}
},
methods: {
//上传成功后操作
upSuccess (res, f, fl) {
this.showNotify(1, this.$t('btn.upload'))
},
//弹框消息封装
showNotify (status, val) {
if (status === 1) {
this.$notify({
title: this.$t('msg.succeed'),
message: val + this.$t('msg.succeed'),
type: 'success',
duration: 2000
})
} else if (status === 0) {
this.$notify({
title: this.$t('msg.error'),
message: val + this.$t('msg.error'),
type: 'error',
duration: 2000
})
} else {
this.$notify({
title: this.$t('msg.error'),
message: this.$t('msg.sysError'),
type: 'error',
duration: 2000
})
}
},
}
}
vue element-ui upload 实现带token上传的更多相关文章
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
随机推荐
- vue-cli 打包后显示favicon.ico小图标
第一步:favicon.ico小图标放在static里面 第二步:index.html 文件中引入时需要写 ./ 相对路径 第三部:npm run build 打包 打包完成就可以看到 favicon ...
- mysql 拒绝访问的解决办法
java.sql.SQLException: null, message from server: "Host 'xxx' is not allowed to connect to thi ...
- (java项目)坦克大战 2.0
这个版本,只能算是一个雏形,把最基本的东西给完成了,不过,后面可添加的也不多.有一点,还是想去实现,那就是敌方坦克自己寻找对手!也就是游戏AI. emmm, 什么时候可以了解一下这个AI.顺便学学py ...
- nginx反向代理与Real-IP和X-Forwarded-For.txt
本文作者张开涛.为保障<亿级流量网站架构核心技术>一书内容的连续性,有些需要读者了解的内容,或者书的补充和引申内容,会通过二维码嵌入的方式引导读者阅读学习.大家可以关注作者公众号“开涛的博 ...
- <操作系统>并发
相关术语 进程的交互:根据进程相互之间知道对方的程度分类为如下几个等级. 进程间的资源竞争.并发进程访问同一资源的时候,会发生冲突.当两个进程访问同一资源的时候,由于并不知道对方的存在,两者之间没有信 ...
- 初步了解Owin
OWIN英文全称是Open Web Interface for .NET. 仅从字面意思看OWIN是针对.net平台的开放web接口. 那Web接口是谁和谁之间的接口呢?是Web应用程序与Web服 ...
- 3.1《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——下载文件
首先,为了不手动创建一个长文件(这太麻烦了),我们将使用强大的curl(有时也写作"cURL")工具从网上下载一个文件,这个命令可以让命令行与URL交互.尽管这不是Unix核心命令 ...
- CF1110H Modest Substrings AC自动机、DP
传送门 如果\(r-l\)比较小,可以将所有满足条件的串扔进\(AC\)自动机然后在上面DP,从前往后确定字符串的每一位. 但是\(l,r \leq 10^{800}\)就十分不可行,所以需要优化这个 ...
- 51Nod 1705 七星剑
一道很新颖的概率DP,我看数据范围还以为是有指数级别的复杂度的呢 记得有人说期望要倒着推,但放在这道题上,就咕咕了吧. 我们考虑正着概率DP,设\(fi\)表示将剑升到\(i\)颗星花费的期望,这样我 ...
- Flutter - 自动生成Android & iOS图标
对于要发布的app来说,做图标是一个麻烦的事,你需要知道N个图标的分辨率,然后用PhotoShop一个个修改导出. PS好图标之后,按照各自的位置放进去. ********************** ...