自定义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-cil之axios的二次封装与proxy反向代理使用说明

    vue-cil之axios的二次封装与proxy反向代理使用说明

    这篇文章主要介绍了vue-cil之axios的二次封装与proxy反向代理使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 一文掌握Pinia使用及数据持久化存储超详细教程

    一文掌握Pinia使用及数据持久化存储超详细教程

    这篇文章主要介绍了Pinia安装使用及数据持久化存储的超详细教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue3后台管理系统之创建和配置项目

    Vue3后台管理系统之创建和配置项目

    后台管理系统是我们日常开发学习经常遇到的一个项目,下面这篇文章主要给大家介绍了关于Vue3后台管理系统之创建和配置项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue实现的多页面项目如何优化打包的步骤详解

    vue实现的多页面项目如何优化打包的步骤详解

    这篇文章主要介绍了vue实现的多页面项目如何优化打包的步骤详解,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • Element Plus Table实现表尾合计功能

    Element Plus Table实现表尾合计功能

    本文介绍了使用ElementPlus在Vue项目中实现表格行汇总功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-07-07
  • vue3使用threejs实现3D卡片水平旋转效果的示例代码

    vue3使用threejs实现3D卡片水平旋转效果的示例代码

    这篇文章主要介绍了在vue3中使用threejs实现3D卡片水平旋转效果,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • vue大型项目之分模块运行/打包的实现

    vue大型项目之分模块运行/打包的实现

    这篇文章主要介绍了vue大型项目之分模块运行/打包的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue table表格中如何控制下拉框的显示隐藏

    vue table表格中如何控制下拉框的显示隐藏

    这篇文章主要介绍了vue table表格中如何控制下拉框的显示隐藏问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue3封装ant-design-vue表格的详细代码

    Vue3封装ant-design-vue表格的详细代码

    这篇文章主要介绍了Vue3封装ant-design-vue表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • Vue 服务端渲染SSR示例详解

    Vue 服务端渲染SSR示例详解

    这篇文章主要介绍了Vue 服务端渲染SSR示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论