<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. arcgis api for javascript中使用proxy.jsp

    当我们使用arcgis api for javascript 查询arcgis服务时,如果查询的参数很长时,通过get方式提交会查询不到结果,因为get方式提交的参数有长度限制,需要通过代理的方式使用 ...

  2. AirSim

    https://github.com/Microsoft/AirSim 功能 1 虚拟模拟 2半虚拟模拟 安装教程 环境安装 1安装 cmake 直接下 .exe 2安装cuda 3安装Eigen 3 ...

  3. 老男孩Python自动化运维视频

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

  4. python opencv show图片,debug技巧

    debug的时候可以直接把图片画出来debug. imshow函数就是python opencv的展示图片的函数,第一个是你要起的图片名,第二个是图片本身.waitKey函数是用来展示图片多久的,默认 ...

  5. 3990 [模板]矩阵快速幂 洛谷luogu

    题目背景 矩阵快速幂 题目描述 给定n*n的矩阵A,求A^k 输入输出格式 输入格式: 第一行,n,k 第2至n+1行,每行n个数,第i+1行第j个数表示矩阵第i行第j列的元素 输出格式: 输出A^k ...

  6. Python实现杨辉三角,超详细!

    巧妙实现杨辉三角代码 def triangles(): N=[1] #初始化为[1],杨辉三角的每一行为一个list while True: yield N #yield 实现记录功能,没有下一个ne ...

  7. Java并发(四)线程池使用

    上一篇博文介绍了线程池的实现原理,现在介绍如何使用线程池. 目录 一.创建线程池 二.向线程池提交任务 三.关闭线程池 四.合理配置线程池 五.线程池的监控 线程池创建规范 一.创建线程池 我们可以通 ...

  8. JavaScript设计模式 - 策略模式(表单验证)

    表单提交的时候,总是要校验,不同的表单可能校验相同的功能. 为了避免代码重复的复制黏贴,使用策略模式,写出来的代码赏心悦目,且可扩展,还可以作为插件到处使用 <!DOCTYPE html> ...

  9. TerraExplorer Add-ons 和TEZ使用说明

    1.    概述 Skyline提供了丰富的API,用户可以根据不同实际需求,进行二次开发封装,实现各种功能的扩展和定制.当我们开发了各种功能页面或者应用程序后,如何将它们快速嵌入到TerraExpl ...

  10. [07] 使用注解完成IOC配置

    1.扫描配置 之前使用的Spring的Bean管理都是通过xml的配置文件来操作的,在Spring3.0之后已经引入了注解形式,Spring可以在指定路径下进行扫描,寻找标注了@Component.@ ...