<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上传的更多相关文章

  1. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  2. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  3. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  4. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  5. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  6. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  7. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

随机推荐

  1. 泰泽智能电视(Tizen smart TV)问世

        6月2日至4日,泰泽开发人员大会(TDC)在美国洛杉矶举行,会上韓国三星公司展出了一台泰泽智能电视(原型机).        智能电视(Smart TV not to be confused ...

  2. cmd应用基础教程

    cmd是什么? 对于程序员而言,cmd命令提示符是windows操作系统下一个比较重要的工具.对于程序员而言,为了追求更高的效率而抛弃花俏的界面已然是一件很常见的行为,截止到目前的,全世界仍有大量的服 ...

  3. 使用intellij idea搭建spring-springmvc-mybatis整合框架环境

    使用intellij idea搭建spring-springmvc-mybatis整合框架环境   1.打开idea,创建maven项目,File-New-Project 2.选择Maven,勾选Cr ...

  4. Java中关于AbstractQueuedSynchronizer的入门(一)

    备注:博文仅仅是学习过程中的零散记录,后期整理. AbstractQueuedSynchronizer的简单介绍可以网上搜索,简单了解字段作用. 示例代码,分析获取锁的过程: import java. ...

  5. ASP 基础一 基本语法

    一 声明变量 二 给变量赋值 三 循环 四 case <html> <head title="test hello world"> </head> ...

  6. 【Codeforces 86C】Genetic engineering

    Codeforces 86 C 题意:给\(m\)个串,要构造长度为\(n\)的串,而且必须由这些模式串们覆盖(可以重复),问可以构造多少种. 思路:首先构造AC自动机,然后\(dp(i,j,k)\) ...

  7. B Long Path

    有n+1个房间.从1-n个房间.每个房间有两扇门.一扇去i+1的房间另一扇去编号为pi的房间. 起点为1,终点为n+1,对应第i个各点,如果我奇数次到达,那么下一步走到a[i]的位子,如果是偶数次到达 ...

  8. 关于for,while,dowhile效率测试

    引言 大家都知道每种循环对应的效率是不同的,书中都说在循环中使用减法的效率是比加法的效率高的,具体情况是怎么样,我们将详细列出各循环的执行效率问题.本文通过查看汇编代码比较各循环的效率以及i++,++ ...

  9. [01-01] 示例:用Java爬取新闻

    1.分析url <空港双流>数字报刊,访问地址为:http://epaper.slnews.net.cn,现在为了抓取每篇新闻的网页内容. 在浏览器访问该链接后,发现链接出现了变化,看样子 ...

  10. 各种工业以太网比较(EtherCAT,EtherNet/IP,ProfiNet,Modbus-TCP,Powerlink)

    EtherCAT(以太网控制自动化技术)是一个以以太网为基础的开放架构的现场总线系统,EterCAT名称中的CAT为ControlAutomation Technology(控制自动化技术)首字母的缩 ...