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 ...
随机推荐
- 泰泽智能电视(Tizen smart TV)问世
6月2日至4日,泰泽开发人员大会(TDC)在美国洛杉矶举行,会上韓国三星公司展出了一台泰泽智能电视(原型机). 智能电视(Smart TV not to be confused ...
- cmd应用基础教程
cmd是什么? 对于程序员而言,cmd命令提示符是windows操作系统下一个比较重要的工具.对于程序员而言,为了追求更高的效率而抛弃花俏的界面已然是一件很常见的行为,截止到目前的,全世界仍有大量的服 ...
- 使用intellij idea搭建spring-springmvc-mybatis整合框架环境
使用intellij idea搭建spring-springmvc-mybatis整合框架环境 1.打开idea,创建maven项目,File-New-Project 2.选择Maven,勾选Cr ...
- Java中关于AbstractQueuedSynchronizer的入门(一)
备注:博文仅仅是学习过程中的零散记录,后期整理. AbstractQueuedSynchronizer的简单介绍可以网上搜索,简单了解字段作用. 示例代码,分析获取锁的过程: import java. ...
- ASP 基础一 基本语法
一 声明变量 二 给变量赋值 三 循环 四 case <html> <head title="test hello world"> </head> ...
- 【Codeforces 86C】Genetic engineering
Codeforces 86 C 题意:给\(m\)个串,要构造长度为\(n\)的串,而且必须由这些模式串们覆盖(可以重复),问可以构造多少种. 思路:首先构造AC自动机,然后\(dp(i,j,k)\) ...
- B Long Path
有n+1个房间.从1-n个房间.每个房间有两扇门.一扇去i+1的房间另一扇去编号为pi的房间. 起点为1,终点为n+1,对应第i个各点,如果我奇数次到达,那么下一步走到a[i]的位子,如果是偶数次到达 ...
- 关于for,while,dowhile效率测试
引言 大家都知道每种循环对应的效率是不同的,书中都说在循环中使用减法的效率是比加法的效率高的,具体情况是怎么样,我们将详细列出各循环的执行效率问题.本文通过查看汇编代码比较各循环的效率以及i++,++ ...
- [01-01] 示例:用Java爬取新闻
1.分析url <空港双流>数字报刊,访问地址为:http://epaper.slnews.net.cn,现在为了抓取每篇新闻的网页内容. 在浏览器访问该链接后,发现链接出现了变化,看样子 ...
- 各种工业以太网比较(EtherCAT,EtherNet/IP,ProfiNet,Modbus-TCP,Powerlink)
EtherCAT(以太网控制自动化技术)是一个以以太网为基础的开放架构的现场总线系统,EterCAT名称中的CAT为ControlAutomation Technology(控制自动化技术)首字母的缩 ...