el-upload添加请求头

最新推荐文章于 2025-05-08 14:59:35 发布

辰九九

最新推荐文章于 2025-05-08 14:59:35 发布

阅读量5.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45812488/article/details/126022143

前端同时被 2 个专栏收录

59 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

在Vue项目中使用ElementUI的el-upload组件上传文件时遇到跨域问题，原因是请求头未携带token。通过在computed属性中获取localStorage中的jwt，并将其添加到headers中，成功解决了问题。修改后的代码能够正常发送携带token的上传请求，实现了文件的顺利上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

solution

Vue项目，需要上传文件

task

使用elementUI的el-upload组件实现文件的上传

action

代码如下

  <el-upload
            class="upload-demo"
            drag
            action="http://47.92.112.6:8000/api/admin/calc/file"
            :multiple="false"
            :show-file-list="true"
            accept=".rar,.zip"
            :limit=1
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传rar/zip文件</div>
        </el-upload>

上传文件报错出现跨域问题，查看请求头因为没有携带token，（项目中使用jwt作为用户身份凭证）
在这里插入图片描述
于是增加请求头，查看官网API，需要增加 headers请求头

修改代码如下，增加 headers

<el-upload
            class="upload-demo"
            drag
            action="http://47.92.112.6:8000/api/admin/calc/file"
            :multiple="false"
            :show-file-list="true"
            accept=".rar,.zip"
            :limit=1
            :headers="headers"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传rar/zip文件</div>
        </el-upload>

computed内增加如下内容

computed: {
    headers(){
      const jwt=localStorage.getItem('jwt')
      return{
        jwt:jwt
      };
    },

获取存储在localStorage中的jwt，加载请求头上
调试，文件上传成功，请求头如下
在这里插入图片描述

在这里插入图片描述

result

在vue中，computed表示“计算属性”，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新，所以在computed中获取jwt，便于获得最新的数据

以前没有学过Vue，直接上手写项目，多有不熟练之处，敬请指正