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 ...
随机推荐
- [笔记]后缀数组SA
参考资料这次是真抄的: 1.后缀数组详解 2.后缀数组-学习笔记 3.后缀数组--处理字符串的有力工具 定义 \(SA\)排名为\(i\)的后缀的位置 \(rk\)位置为\(i\)的后缀的排名 \(t ...
- 记录清除wnTKYg挖矿工木马(守护进程ddg.xxxx)的过程
起因,阿里云多次提醒我的一台服务器有恶意发包行为,且给出了一些解决办法.之前也没太在意,就按照解决办法处理了一下.然后过一段时间,还是提示有此行为. 猜肯定是中了木马了,开始以为是被肉鸡了拿来做DDo ...
- Kubernetes中的Taint污点和Toleration容忍
Taint(污点)和 Toleration(容忍)可以作用于 node 和 pod master 上添加taint kubectl taint nodes master1 node-role.kube ...
- Python调用WIN10语音交互+识别+控制+自定义对话
1 安装库文件 2修改两个地方 最简单的 # 将输入文字转化为语音信号输出 import speech while True: speech.say("请输入:") str = i ...
- go标准库的学习-encoding/json
参考https://studygolang.com/pkgdoc 导入方式: import "encoding/json" json包实现了json对象的编解码,参见RFC 462 ...
- 1115 洛谷luogu最大子段和
题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NNN,表示了序列的长度. 第二行包含NNN个绝对值不大于100001000010000的 ...
- patch函数的解释2
patch 创建补片图形对象 句法: patch(X,Y,C) patch(X,Y,Z,C) patch(FV) patch(...'PropertyName',propertyvalue...) p ...
- 简单的CSS圆形缩放动画
简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...
- ASP.NET 加密解密
1.MD5 2.DES 一 MD5 介绍:MD5是不可逆解密方式,比如对密码的加密,为了保密,让密码不能解密 public static string MD5Encrypt(string str) { ...
- java 面向对象抽象类和接口
1.abstract:可以修饰类和方法,被abstract修饰过的称为抽象类和抽象方法. 抽象类: 除了不可以创建对象, 其他和普通类一致. 可以有成员方法.静态方法和构造方法(提供给子类调用)等. ...