element ui 上传组件实现手动上传

首先需要给上传组件增加http-request属性,这个方法中可以获取到文件,并按照自己的方式进行上传。

<el-upload
      ref='fileUpload'
      action='#'
      :http-request='httpRequest'
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success='handleSuccess'
      accept='.xls'
      >
      <el-button
        size="small"
        type="primary"
       >上传文件</el-button>
      <div slot="tip">支持扩展名:.xls</div>
</el-upload>

设置了http-request属性之后,在选取文件后马上就会调用该方法。如果不想要马上上传的话,只需要增加:auto-upload=‘false’,然后在需要上传时,调用实例的submit方法即可执行httpRequest方法

methods:{
	upload(){
		this.$refs.fileUpload.submit()
	}
}

如果是单纯的上传文件,但需要携带参数的话,只需要增加属性即可,例如:

<el-upload
      ref='fileUpload'
      :data="{productId:123}"
      action='#'
      :http-request='httpRequest'
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success='handleSuccess'
      accept='.xls'
      >
      <el-button
        size="small"
        type="primary"
       >上传文件</el-button>
      <div slot="tip">支持扩展名:.xls</div>
</el-upload>

但是如果是在表单中上传文件,且是直接和其他表单项数据一起上传的话,则需要手动进行上传。(不做表单校验则不需要手动进行数据传输,直接使用data属性包含额外参数即可)
如果需要做表单校验,则httpRequest只是为了获取到文件,首先不要设置auto-upload,选择文件后马上就调用httpRequest方法,在httpRequest方法中获取到文件并储存,方便后面做表单校验。

    httpRequest(params) {
      this.form.file = params.file
    },

在最终提交时,需要使用formData对象,包裹数据传输

      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            file: this.form.file,
            secret: this.form.key
          }
          let form = new FormData()
          for (let i in data) {
            form.append(i, data[i])
          }
          uploadFn(form).then((res) => {
           this.$message('上传成功')
          })
        }
      })

记得在请求时,增加请求头:

      headers: {
        'Content-Type': 'multipart/form-data'
      }

然后你就会看到
在这里插入图片描述

完事!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/186950.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源】基于Vue和SpringBoot的农家乐订餐系统

项目编号&#xff1a; S 043 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S043&#xff0c;文末获取源码。} 项目编号&#xff1a;S043&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核…

西安数字孪生赋能工业制造,加速推进制造业数字化转型

西安数字孪生、5G、工业物联网、工业互联网等新一代信息通信技术与工业制造业经济深度融合&#xff0c;通过对人、机、物、系统等全面连接&#xff0c;构建覆盖全产业链、全价值链的全新制造和服务体系&#xff0c;为工业乃至产业数字化、网络化、智能化发展提供实现途径&#…

Docker容器

Docker容器 容器相关概念容器的状态转换 容器命令docker createdocker rundocker psdocker logsdocker attachdocker execdocker startdocker stopdocker restartdocker killdocker topdocker statsdocker container inspectdocker portdocker cpdocker diffdocker commitdocke…

在 vue3 中使用 Recorder 实现录音并上传(mp3、wav)兼容 PC 和移动端

一、Recorder 介绍 使用 Recorder插件可以在网页中进行录音。生成 blob 文件并可以自定义上传&#xff0c;同时&#xff0c;录音过程中会显示可视化波形&#xff0c;同时能够做到兼容PC端、Android、和iOS&#xff0c;十分好用&#xff01; Recorder github 首页 插件效果展…

PIL.UnidentifiedImageError: cannot identify image file ...

按照网上搜的重新安装pillow库&#xff0c;对我这个不适用。我的解决方法是把有问题的图片删掉。

[Docker]十一.Docker Swarm集群raft算法,Docker Swarm Web管理工具

一.Docker Swarm集群raft算法讲解 Raft &#xff1a;一致性算法&#xff0c;在保证大多数管理节点存活的情况下&#xff0c;集群才能使用&#xff0c; 所以就要求如果集群的话&#xff0c; manager 节点必须 >3 台 &#xff0c;如果是两个台&#xff0c;其中一台宕机&#…

运动蓝牙耳机什么牌子好?百元蓝牙运动耳机排行榜

​跑步、骑车、健身等运动时&#xff0c;大家都需要一款专业的运动耳机来陪伴&#xff0c;它不仅可以提供高品质的音乐和佩戴舒适度&#xff0c;还可以帮助你掌握运动状态&#xff0c;让你更加专注和投入。今天我为大家推荐几款备受好评的运动耳机&#xff0c;它们都拥有不错的…

Vatee万腾的科技冒险:Vatee独特探索力量的数字化征程

在数字化时代的激流中&#xff0c;Vatee万腾以其独特的科技冒险精神&#xff0c;引领着一场前所未有的数字化征程。这不仅仅是一次冒险&#xff0c;更是对未知的深度探索&#xff0c;将科技的力量推向新的高度。 Vatee万腾在科技领域敢于挑战传统&#xff0c;积极探索未知的可能…

Android Frameworks 开发总结之七

1.修改android 系统/system/下面文件时权限不够问题 下面提到的方式目前在Bobcat的userdebug image上测试可行&#xff0c;还没有在user上测试过. 修改前: leifleif:~$ adb root restarting adbd as root leifleif:~$ adb disable-verity verity is already disabled using …

SAP从放弃到入门系列之-制造商零件编号-MPN 物料

文章目录 一、概念二、 配置点配置点1&#xff1a;启用MPN配置点2&#xff1a;MPN配置参数文件配置点3&#xff1a;激活库存管理的MPN所有功能变化1&#xff1a;MM01界面有库存管理制造商零部件号的字段&#xff1a;变化2&#xff1a;MM60界面的查询条件多了MPN物料号变化3&…

数据结构 | 堆【图解】

数据结构 | 堆【图解】 文章目录 数据结构 | 堆【图解】堆的概念及结构堆的实现堆的初始化堆的插入【重点】堆的删除【重点】取堆顶的数据堆的数据个数堆的判空堆的销毁 全部代码 堆的概念及结构 堆&#xff08;heap&#xff09;&#xff1a; 一种有特殊用途的数据结构——用来…

面试题:工作中做过 JVM 调优吗?怎么做的?

文章目录 前言cpu占用过高死锁内存泄漏上面只是其中一种处理方法 总结 前言 最近很多小伙伴跟我说&#xff0c;自己学了不少JVM的调优知识&#xff0c;但是在实际工作中却不知道何时对JVM进行调优。今天&#xff0c;我就为大家介绍几种JVM调优的场景。 在阅读本文时&#xff…

SSM企业风向管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 企业风向管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库 &#xff0c;系统主要采用B/…

算法基础之表达式求值

算法基础之表达式求值 中序表达式求值 用栈 将字符和数字分别用栈存储 由下往上计算 左子树算完再算右子树 判断方法&#xff1a;当前符号优先级<前一个符号优先级 则左右子树已遍历完 #include<iostream>#include<cstring>#include<stack>#include&l…

windbg双机调试

1&#xff1a;虚拟机增加串行端口 2&#xff1a;操作步骤&#xff1a;编辑虚拟机设置 -> 添加 -> 串行端口 -> 完成 参数配置&#xff1a;使用命名管道 -> \\.\pipe\com_1 -> 该端是服务器&#xff0c;另一端是应用程序 -> 轮询时主动放弃CPU->确定 3 -b…

【阿里云】图像识别 智能分类识别 项目开发(一)

语音模块和阿里云图像识别结合 环境准备 代码实现 编译运行 写个shell脚本用于杀死运行的进程 语音模块和阿里云图像识别结合 使用语音模块和摄像头在香橙派上做垃圾智能分类识别 语音控制摄像下载上传阿里云解析功能点实现 环境准备 将语音模块接在UART5的位置 在orange…

安卓 Android Studio更换app的图标

大概完成了一个app&#xff0c;在测试机的界面app的icon显示的是默认安卓图标&#xff0c;找了一个简单的更换方法 打开 Androidmanifest.xml 文件&#xff0c;在 application 找到代码 android:icon"mipmap/ic_launcher" 按下Ctrl鼠标左键转到相应位置 如图在背景…

Apache Superset数据分析平台如何实现公网实时远程访问数据【内网穿透】

文章目录 前言1. 使用Docker部署Apache Superset1.1 第一步安装docker 、docker compose1.2 克隆superset代码到本地并使用docker compose启动 2. 安装cpolar内网穿透&#xff0c;实现公网访问3. 设置固定连接公网地址 前言 Superset是一款由中国知名科技公司开源的“现代化的…

SpringCloud 微服务全栈体系(十七)

第十一章 分布式搜索引擎 elasticsearch 七、搜索结果处理 搜索的结果可以按照用户指定的方式去处理或展示。 1. 排序 elasticsearch 默认是根据相关度算分&#xff08;_score&#xff09;来排序&#xff0c;但是也支持自定义方式对搜索结果排序。可以排序字段类型有&#…

跑步运动耳机哪个牌子好?运动型无线耳机排行榜

​运动耳机是我们运动时不可或缺的装备&#xff0c;它可以让你享受高品质的音乐&#xff0c;还提供了高舒适佩戴体验以及稳定的连接。然而面对市面上层出不穷的运动耳机&#xff0c;到底哪款更值得入手&#xff1f;今天我为大家推荐几款市面上备受好评的运动耳机&#xff0c;是…