如何在ElementUI的上传组件el-upload中设置header

 更新时间:2022年09月07日 08:34:10   作者:龙易安  
这篇文章主要介绍了如何在ElementUI的上传组件el-upload中设置header,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在ElementUI上传组件el-upload中设置header

在vue项目中我们发送ajax请求一般都会使用axios,并在axios中设置axios.defaults.baseURL,请求的基本地址,并在请求拦截器中设置headers

axios.interceptors.request.use(config=>{
  NProgress.start();
  // 发送请求需带上token
  config.headers.Authorization=window.sessionStorage.getItem("token")
  return config;
})

使用el-upload上传组件时,action 为必选参数,上传的地址。

但此时我们为action填写地址不能不写基本地址而仅写upload,要写完整的地址。

这是因为el-upload上传组件在上传发送请求时,不会去使用我们设置的axios,而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。

那有时在上传时会报出错误,例如‘无效token’,这是因为我们没有为此上传请求设置请求头部。el-upload组件有一个属性headers ,设置上传的请求头部

 <el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :headers="headerObj"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件,且不超过500kb
              </div>
            </el-upload>

在data中定义headerObj

headerObj: {
        Authorization: window.sessionStorage.getItem("token"),
      },

element-ui中的upload组件使用总结

element-ui官网

使用upload组件:

<el-upload
   class="upload-demo"
   ref="uploadFile"
   :on-change="beforeUpload"
   :action="uploadUrl"
   :headers="myHeader"
   :on-remove="handleRemove"
   :before-remove="beforeRemove"
   :limit="1"
   :auto-upload="false"
   :on-exceed="handleExceed"
>
<el-button size="small" type="primary">选择文件</el-button>
  • action: 是请求后端接口的路径 (必填的)
  • header: 是配置请求头的 / 在此处带了token
  • on-change: 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
  • on-remove: 是文件列表中移除文件时执行的
  • before-remove: 删除文件之前执行的,可以用作提示用户二次确认删除
  • limit: 是上传文件的个数
  • auto-upload: 是控制是否自动上传的
  • on-exceed: 上传文件个数超过限制的时候执行的

此处添加的ref是为了在用户点击关闭后清空列表 

通过clearFiles方法,这也是element提供的。

addDialogClose(){
  this.$refs.ruleForm.resetFields();
  this.addClassroomShow = false
  this.$refs.upload.clearFiles();
}

在使用时最坑的地方就是action属性不能及时响应数据跟新,总是晚一步。

使用了before-upload、on-progress都不行,数据已经更改,但是action里还是旧的。

研究一下午:

将auto-upload属性设置为false,

然后使用了on-change

在on-change钩子中,去判断文件后缀,来确定文件类型,来确定调用不同的接口

然后通过ref属性去执行上传

beforeUpload(file) {
  if(/\.(mp4|m3u8|rmvb|avi|swf|3gp)$/.test(file.name)) {
     this.ruleForm.uploadUrl = this.vidoeUploadUrl
  }else{
     this.ruleForm.uploadUrl = this.fileUploadUrl
  }
  this.$nextTick(()=>{
     this.$refs.uploadFile.submit()
  })
},

此时就ok了!

如果action是死路径就不需要考虑这些问题了。如果是动态的,就让它异步,或给它加个延时器。

总结:upload组件已经封装的很好了,只是action属性是必填的,有点坑。以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue生态系统工具库Vueuse的使用示例详解

    Vue生态系统工具库Vueuse的使用示例详解

    Vueuse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件和函数,本文将介绍 Vueuse 的主要特点和用法,以及它在 Vue.js 开发中的作用和优势,感兴趣的可以了解下
    2024-02-02
  • vue集成kindeditor富文本的实现示例代码

    vue集成kindeditor富文本的实现示例代码

    这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Vue登录页面的动态粒子背景插件实现

    Vue登录页面的动态粒子背景插件实现

    本文主要介绍了Vue登录页面的动态粒子背景插件实现,将登录组件背景设置为 "粒子背景",具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue高效管理组件状态的多种方法

    Vue高效管理组件状态的多种方法

    在现代前端开发中,随着应用复杂度的不断提升,组件状态管理成为构建高效、可维护的Vue应用的核心问题,本文将介绍多种管理组件状态的方法,需要的朋友可以参考下
    2025-03-03
  • Vuex实现数据增加和删除功能

    Vuex实现数据增加和删除功能

    今天小编就为大家分享一篇Vuex实现数据增加和删除功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 详解vue.js数据传递以及数据分发slot

    详解vue.js数据传递以及数据分发slot

    本篇文章给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识,有这方面兴趣的朋友参考下吧。
    2018-01-01
  • vue引用echarts饼图不显示图例的解决

    vue引用echarts饼图不显示图例的解决

    这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue项目配置element-ui容易遇到的坑及解决

    vue项目配置element-ui容易遇到的坑及解决

    这篇文章主要介绍了vue项目配置element-ui容易遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    Vue向后台传数组数据,springboot接收vue传的数组数据实例

    这篇文章主要介绍了Vue向后台传数组数据,springboot接收vue传的数组数据实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    这篇文章主要介绍了Vue Router解决多路由复用同一组件页面不刷新问题,多路由复用同一组件的场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08

最新评论