1. <el-upload
  2. class="upload-demo"
  3. :data ="uploadData"
  4. :headers = "headers"
  5. action="http://test/post"
  6. :show-file-list="false"
  7. style="float: right;"
  8. list-type="picture"
  9. accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp"
  10. :on-success="upSuccess"
  11. multiple>
  12. <el-button size="small" class= "variantBtn" type="text">{{$t("edit.addImg")}}</el-button>
  13. </el-upload>

:header 在里面写要携带的token的参数,:data 是携带一同传过去的数据的参数

  1. import util from '@/libs/util.js'
  2. export default {
  3. data () {
  4. return {
  5. uploadData: {
  6. type: 1
  7. },
  8. headers: {
  9. Authorization: util.cookies.get('token') //从cookie里获取token,并赋值 Authorization ,而不是token
  10. },
  11. }
  12. },
  13. methods: {
  14. //上传成功后操作
  15. upSuccess (res, f, fl) {
  16. this.showNotify(1, this.$t('btn.upload'))
  17. },
  18. //弹框消息封装
  19. showNotify (status, val) {
  20. if (status === 1) {
  21. this.$notify({
  22. title: this.$t('msg.succeed'),
  23. message: val + this.$t('msg.succeed'),
  24. type: 'success',
  25. duration: 2000
  26. })
  27. } else if (status === 0) {
  28. this.$notify({
  29. title: this.$t('msg.error'),
  30. message: val + this.$t('msg.error'),
  31. type: 'error',
  32. duration: 2000
  33. })
  34. } else {
  35. this.$notify({
  36. title: this.$t('msg.error'),
  37. message: this.$t('msg.sysError'),
  38. type: 'error',
  39. duration: 2000
  40. })
  41. }
  42. },
  43. }
  44. }

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. 【 nginx 】怎么安装nginx

    一,下载地址:http://nginx.org/en/download.html 二,下载完成之后,是一个安装包,解压之后就能直接使用 三,点击进去我们刚刚解压好的nginx的安装包,打开nginx. ...

  2. C# X509Certificate类 调用证书

    一.命名空间 using System.Security.Cryptography.X509Certificates; 二.调用代码 string certPath = Server.MapPath( ...

  3. luogu P5151 HKE与他的小朋友

    嘟嘟嘟 看到\(i\)变成了\(A_i\),我突然想起了置换这个东西.于是马上到网上学了一遍轮换乘法. 手模后发现轮换乘法满足结合律,但不满足交换律. 于是就可以快速幂啦. 需要注意的是每一次相乘是\ ...

  4. 解惑 ["1", "2", "3"].map(parseInt) 为何返回[1,NaN,NaN]

    javascript中的parseInt与map函数都是常用的函数,可是 ["1", "2", "3"].map(parseInt) 为何返 ...

  5. go标准库的学习-strings-字符串操作

    参考https://studygolang.com/pkgdoc 导入方式: import "strings" strings包实现了用于操作字符的简单函数. 常用的几个函数: f ...

  6. Python基础视频

    链接:https://pan.baidu.com/s/1oPiS32sWVysuVAivtdFKnQ 密码私聊我

  7. [TPYBoard - Micropython之会python就能做硬件 开篇]会python就能做硬件!

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 会python就能做硬件! 在写这套教程之前,首先感觉山东萝卜电子科技有限公司(turnip ...

  8. java的classloader不求甚解

    先简单介绍下java的classloader,网上资料很多,就说点关键的. Java 中的类加载器大致可以分成两类,一类是系统提供的,另外一类则是由 Java 应用开发人员编写的.系统提供的类加载器主 ...

  9. OK6410移植linux3.3.1

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 首先修改资源代码,进入arch/arm/mach-s3c64xx/目录,在这里我们使用mini6410的资源配置 ...

  10. 2-(基础入门篇)Air202下载开发入门(给Air202下载第一个程序)

    http://www.cnblogs.com/yangfengwu/p/8887933.html 资料链接 链接:https://pan.baidu.com/s/1-SRfsKGQ7rZVvFmp1O ...