自定义elementui上传文件以及携带参数问题

 更新时间:2023年08月12日 16:00:30   作者:沃特艾文儿~  
这篇文章主要介绍了自定义elementui上传文件以及携带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

自定义elementui上传文件以及携带参数

elementui提供了上传文件的ui,可以比较方便,我们需要它来完成自定义上传文件以及携带参数需要改写其中的一些方法来实现。

下面是一个简单的上传标签

    <el-upload
        ref="upload"
        style="display: inline"
        drag
        action=""
        :before-upload="beforeUploadHandle"
        :http-request="handleUploadForm"
        :auto-upload="false"
        multiple
        :limit="1"
        :on-exceed="handleExceed">
      <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link>
    </el-upload>

不自动上传

:auto-upload=“false”
  • 限制上传文件个数
:limit=“1”
  • 上传之前的校验

我们需要实现这个方法,来检测上传的合法性

:before-upload=“beforeUploadHandle”
  • 上传时需要携带参数

需要上传的数据文件以及参数在这里来处理添加

:http-request=“handleUploadForm”
  • 检测添加文件是否超过限制
:on-exceed=“handleExceed”

手动上传

其中的upload对应于上面的ref=“upload”,我们只需要给按钮实现一个方法执行此语句便可以实现自己点击上传

this.$refs.upload.submit();

具体实现

上传限制以及上传之前的校验不赘述,这里给出一个简单的demo。

上传限制实现类似,只是给出一些提示信息,file便是我们上传的文件。

    beforeUploadHandle(file) {
      if (
          file.type !== "image/png" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件!");
        return false;
      }
    },

携带参数

handleUploadForm(param) {
      console.log(this.pid)
      let thisInfo = this
      let formData = new FormData()
      // 在formData中加入我们需要的参数
      formData.append('file', param.file)
    	formData.append('id', this.pid)
    // 向后端发送数据
      thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => {
        if (res.status === 200) {
          thisInfo.$message.success('修改信息成功')
        } else {
          thisInfo.$message.success('修改信息失败')
        }
        thisInfo.formFileList = []
        thisInfo.uploadFormFileList = []
      })
    }

element-ui上传文件携带参数到后台接收

前端

数据

后台

注意这里要对应,接收的不是mydata,而是具体的值

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue-路由导航菜单栏的高亮设置方法

    Vue-路由导航菜单栏的高亮设置方法

    下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现按需加载组件及异步组件功能

    vue实现按需加载组件及异步组件功能

    这篇文章主要介绍了vue实现按需加载组件和异步组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • element多个table实现同步滚动的示例代码

    element多个table实现同步滚动的示例代码

    本文主要介绍了element多个table实现同步滚动,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • VUE插件vue-treeselect的使用及说明

    VUE插件vue-treeselect的使用及说明

    这篇文章主要介绍了VUE插件vue-treeselect的使用及说明,具有很好的参考价值,希望对大家有所帮助。
    2023-07-07
  • Vue ElementUI table实现双击修改编辑某个内容的方法

    Vue ElementUI table实现双击修改编辑某个内容的方法

    在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善
    2024-09-09
  • vue jsx 使用指南及vue.js 使用jsx语法的方法

    vue jsx 使用指南及vue.js 使用jsx语法的方法

    这篇文章主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • 详解keep-alive组件缓存

    详解keep-alive组件缓存

    keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能,本文给大家介绍keep-alive组件缓存的相关知识,感兴趣的朋友一起看看吧
    2024-01-01
  • vite+vue3代码风格校验及格式化方式

    vite+vue3代码风格校验及格式化方式

    这篇文章主要介绍了vite+vue3代码风格校验及格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 手把手搭建安装基于windows的Vue.js运行环境

    手把手搭建安装基于windows的Vue.js运行环境

    手把手教大家搭建安装基于windows的Vue.js的运行环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue动态组件实现异常处理方法

    Vue动态组件实现异常处理方法

    Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02

最新评论