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 ...
随机推荐
- cenos下安装MySQL最新版(5.7.18)记录。附卸载老版本过程
首先说明:老版本数据库没有数据,所以无数据备份过程.如果你在升级数据库过程里,需要备份数据,请另外自行处理. 1.下载最新版MySQL.解压待用 wget https://dev.mysql.com/ ...
- The Cat in the Hat POJ - 1289
题意:给你来两个数A,B .其中A=(n+1)k, B=nk 输出:(nk-1)/(n-1) 和 ∏ (n+1)k-i ni 思路:关键就是怎么求n和k.本来想这n一定是几个质因数的乘积,那 ...
- PCB
Layer Stack Manager(层堆栈管理) 用户可以通过Layer Stack Manager对话框来添加更多的层. 1.选择Design>>Layer Stack Manage ...
- 对node.js的理解?
a.Node.js是一个基于Google Chrome V8引擎的javascript运行环境.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量又高效.Node.js的包管理器npm, ...
- Linux Sysstat性能监控工具安装及常见8个命令使用例子
Sysstat,一种常用在Linux系统服务器中的软件工具包,可以用来监控服务器的性能.比如可以监控CPU.硬盘.网络等数据,我们可以用来进行分析服务器的性能和资源的使用效率.老左将在这篇文章中学习. ...
- leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
104: class Solution { public: int maxDepth(TreeNode* root) { if(root == NULL) ; int left = maxDepth( ...
- SQL优化思路大全
一.百万级数据库优化方案 1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断 ...
- layui前端框架之分页
框架环境:SSM框架 为了保证效果,此次演示也用到了jQuery ui框架,大家最好也引入进来 一.去layui官网下载包,解压后,然后导入文件中,最好放再main/webapp文件夹下 官网地址如下 ...
- WebSocket原理与实践(四)--生成数据帧
WebSocket原理与实践(四)--生成数据帧 从服务器发往客户端的数据也是同样的数据帧,但是从服务器发送到客户端的数据帧不需要掩码的.我们自己需要去生成数据帧,解析数据帧的时候我们需要分片. 消息 ...
- battery for stm32
右边两个1N4148的压降都是0.7V,并且3.3-0.7=2.6V & 3-0.7=2.3V 可见在电源3.3V正常供电的情况下,电池处于休息状态,这就有效避免了电池的不必要消耗: