<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. 安装oracle11g时出现:在注册表中没有找到指定的主目录名

    我碰到这个问题,不过我没去管它.直接安装了,后来数据库实例,什么的都能安装,目前没有发现什么问题. 造成这个的原因:是卸载oracle时注册表没有彻底删除! 如果后面出现问题,再记录.

  2. NET站点升级后,新特新无法编译通过

    NET3.5 webconfig中有自动配置如下代码,用于指示编译器. <system.codedom> <compilers> <compiler language=& ...

  3. Python之字符

    关于字符的常用操作:(字符为不可变长度的类型,故不能“增”.“删”等改变长度的操作) 1.改:改变字符串中的某个值.但为浅改变: name = "Python3.5" print( ...

  4. HashMap中推荐使用entrySet方式遍历Map类集合KV而不是keySet方式遍历

    我们先来做一个测试 public class HashMapTest { private HashMap<String, String> map = new HashMap<> ...

  5. CSP2019 滚粗记

    目录 CSP 2019 游记 DAY 0 DAY 1 DAY 2 CSP总结 自测之后 CSP 2019 游记 坐标:GD,GZ 人物:hyf 组别:J和S 任务:划水 目标:划水 任务奖励:退役证书 ...

  6. Kali中文乱码问题

    上面的是用网上介绍的安装组件无法安装,老是提示最后一句:Unable to locate package ...... 后来觉得应该是因为安装Kali时在最后有个选择更新系统的一个配置上,我选择了下面 ...

  7. 【原】linux设置网络延迟/丢包操作

    1.tc方式 * 清除设备策略:tc qdisc del root dev eth2 2>/dev/null* 设置设备策略:tc qdisc add dev eth0 root netem l ...

  8. 学习笔记(6)- pytext训练会话助手

    https://github.com/facebookresearch/pytext https://pytext.readthedocs.io/en/master/ https://pytext.r ...

  9. 「CH6101」最优贸易

    「CH6101」最优贸易 传送门 考虑一种贪心的思想:我们要尽量买价格小的货物,并尽量高价转卖. 我们记 : \(mn[i]\) 为从点 \(1\) 走到点 \(i\) 经过的价格最小的货物的价格. ...

  10. 安装pymongo

    cd /usr/local/src wget --no-check-certificate https://pypi.python.org/packages/source/p/pymongo/pymo ...