<template>
  <div>
    <el-upload
      action="http://localhost:3000/picture"
      :headers="headers"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
 </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        headers:{}
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
    created(){
      this.$http.get('/picture')
      this.headers ={Authorization : 'Bearer '+(localStorage.token || '')}
    }
  }
</script>
 
1,在data中创建headers对象
2,element中动态绑定headers
3,   created中赋值

element设置headers添加token的更多相关文章

  1. djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记

    情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...

  2. jquery.ajax 跨域请求webapi,设置headers

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端 ...

  3. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  4. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  5. jQuery.ajax() 设置 Headers 中的 Accept 内容

    jQuery.ajax() 如何设置 Headers 中的 Accept 内容   其实很简单,首先如果是常见类型,则请直接设置 dataType 属性 $.ajax({ dataType: &quo ...

  6. 交互-通过axios拦截器添加token认证

    通过axios拦截器添加token认证 一.通过axios请求拦截器添加token,保证拥有获取数据的权限 通常访问接口需要相关权限,通常是需要携带token如下所示 那如何在请求头中添加token? ...

  7. discuz 修改亮剑积分商城2.91模板(在常用设置中添加商场首页排序方式的背景颜色)

    在应用 -> 积分商城 -> 常用设置 中添加 商场首页排序方式 的背景颜色修改功能 步骤: 1.找到并打开此页面对应的模板source\plugin\aljsc\template\set ...

  8. python + seleinum +phantomjs 设置headers和proxy代理

    python + seleinum +phantomjs 设置headers和proxy代理     最近因为工作需要使用selenium+phantomjs无头浏览器,其中遇到了一些坑,记录一下,尤 ...

  9. Python爬虫设置Headers

    Python设置Headers import urllib import urllib2 url = 'http://www.server.com/login' user_agent = 'Mozil ...

随机推荐

  1. 【摘录自MDN】对事件冒泡和捕捉的解释

    当一个事件触发了一个有父元素的元素(例如我们的<video>时),现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段. 在捕获阶段: 浏览器检查元素的最外层祖先(<html> ...

  2. C/C++ scanf和gets 区别 , printf和puts区别

    ref 1. scanf和gets区别 | 博客园 2. printf和puts区别 | CSDN scanf和gets都能从输入流stdin读取字符串,那么它们有什么区别呢? scanf 留回车:开 ...

  3. el-dialog 如何自定义大小样式

    使用属性:custom-class 然后在css中根据这个类型编写指定的样式即可(比如宽高) 举例:

  4. 「快学Docker」Docker简介、安装和Hello World实现

    前言 Docker已经成为了一门炙手可热的技术,每个程序员(特别是后端程序员)都应该学习下Docker这门技术. Docker是什么 来自官网的定义:Docker是以Docker容器为资源分割和调度的 ...

  5. 2 JavaScript输出&字面量&变量&操作符&语句&标识符和关键字&字符集&语句&数据类型与类型转换

    JS输出: JavaScript没有任何打印或者输出的函数,但是可以用不同的方式输出数据 window.alert():弹出警告框 document.write():写入文档 innerHTML:写入 ...

  6. Chrome 浏览器新功能:共享剪贴板

    导读 Chrome 79 在桌面版和 Android 版浏览器中添加了一项新的功能,名为“共享剪贴板”(shared clipboard). 简单来说,就是可以实现在电脑端复制,手机端粘贴.有了这项功 ...

  7. git 常用命令记录 -- 快捷&备忘

    1.安装 略2.git拉取远程分支 git config user.name git config user.email git config --global user.name xxxx git ...

  8. YUV颜色编码格式

    YUV 颜色编码采用的是 明亮度 和 色度 来指定像素的颜色,而色度又定义了颜色的两个方面:色调和饱和度. 其中: Y 表示明亮度(Luminance.Luma) U 和 V 表示色度(Chromin ...

  9. mabatisplus-update

    /** * <p> * 根据 whereEntity 条件,更新记录 * </p> * * @param entity 实体对象 (set 条件值,不能为 null) * @p ...

  10. 十八、oracle查看、扩展表空间及linux服务器硬盘容量大小查看

    /*备注:表空间是数据库的逻辑组成部分从物理上将:数据库数据存放在数据文件中从逻辑上将:数据库则是存放在表空间中表空间由一个或是多个数据文件组成*/ --1.查看用户下面的所有的表SELECT * F ...