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

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

<el-uploadref='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-buttonsize="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-uploadref='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-buttonsize="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'}

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

完事!

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据分享】2023年我国省市县三级的瞪羚企业数量(免费获取/Excel/Shp格式)

企业是经济活动的参与主体。一个城市的企业数量决定了这个城市的经济发展水平&#xff01;比如一个城市的金融企业较多&#xff0c;那这个城市的金融产业肯定比较发达&#xff1b;一个城市的制造业企业较多&#xff0c;那这个城市的制造业肯定比较发达。 之前我们给大家分享了…

标题导航点击导航滑动到指定位置滑动到指定位置选中对应导航vue3

菜单导航栏点击导航滑动到指定位置&滑动到指定位置选中对应导航 效果 实现 话不多说直接上代码&#xff0c;有用素质三连(点赞、评论、加关注) import { defineComponent, onBeforeUnmount, onMounted, reactive, ref } from "vue"; import { map } from &quo…

加入华为云鲲鹏极简开发创造营,激活创造力,探索无限可能!

数字经济时代&#xff0c;速度、效率、质量安全已成为各行业告诉拓新发展的关键&#xff0c;华为云不断打磨敏捷安全开发的软件平台&#xff0c;为更高效率的生产力变革积蓄能量。 在刚刚过去不久的2023华为全联接大会上&#xff0c;华为最新发布了华为云CodeArts与鲲鹏DevKit…

java操作富文本插入到word模板

最近项目有个需求&#xff0c;大致流程是前端保存富文本&#xff08;html的代码&#xff09;到数据库&#xff0c;后台需要将富文本代码转成带格式的文字&#xff0c;插入到word模板里&#xff0c;然后将word转成pdf&#xff0c;再由前端调用接口下载pdf文件&#xff01; 1、思…

深入理解数据结构:链表

文章目录 &#x1f330;导语&#x1f330;链表的定义及基本结构&#x1f330;单链表&#x1f955;单链表特点 &#x1f330;双向链表&#x1f955;双链表特点 &#x1f330;循环链表&#x1f955;循环链表特点 &#x1f330;链表的操作&#x1f346;链表的插入&#x1fad8;链头…

【洛谷 P1636】Einstein学画画 题解(图论+欧拉通路)

Einstein学画画 题目描述 Einstein 学起了画画。 此人比较懒~~&#xff0c;他希望用最少的笔画画出一张画…… 给定一个无向图&#xff0c;包含 n n n 个顶点&#xff08;编号 1 ∼ n 1 \sim n 1∼n&#xff09;&#xff0c; m m m 条边&#xff0c;求最少用多少笔可以画…

贵金属交易指南:如何在市场中获利?

贵金属市场一直以来都是投资者追逐利润的热门选择&#xff0c;然而&#xff0c;贵金属市场波动较大&#xff0c;在市场中获利并非易事。想要成功&#xff0c;需要理解市场动态和采取适当的策略。万洲金业将为您提供一些实用的贵金属交易指南&#xff0c;帮助您在市场中获利。 …

基于element自动表格

需求是根据JSON文件生成表格&#xff0c;包含配置和自动props属性以及过滤器&#xff1b; 数据示例&#xff1a; 表格设置&#xff1a; /*** 表格表头信息* chineseToPinYin: 这是封装的根据中文汉字转换为拼音的方法* prop: 表头字段名* filter: 数据过滤器* label: 表头显示…

基于Vue+SpringBoot的校园疫情防控管理系统

项目编号&#xff1a; S 037 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S037&#xff0c;文末获取源码。} 项目编号&#xff1a;S037&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学生2.2 老师2.3 学校管理部门 三、…

炫我出席数字光影工作室专业建设论坛,受聘为专家委员会委员!

11月18日&#xff0c;炫我科技受邀参加在北京深澜AI空间举办的2023数字光影工作室专业建设论坛。本次活动由北京市新媒体技师学院主办、北京澜景科技有限公司协办&#xff0c;私有云售前技术工程师龚琛代表我司出席&#xff0c;并受聘为新媒体技师学院数字光影工作室专家委员会…

工业级5G路由器:稳定性更高,网络速度更快!

随着5G技术的发展&#xff0c;5G路由器也越来越受到人们的关注。特别是工业级5G路由器&#xff0c;它的应用范围更广&#xff0c;稳定性更高&#xff0c;网络速度更快&#xff0c;已成为许多企业和工业领域的必备选择。 一、工业级5G路由器的特点 工业级5G路由器具有很多独特的…

中电金信:守【政】创新,探路保险数字化转型“新范式”

11月23日&#xff0c;CIIP2023中国保险科技创新合作大会在京举办。大会汇集保险科技领域行业专家、学者、国内外头部险企及保险科技公司负责人等各界人士&#xff0c;立足保险行业高质量发展和创新驱动理念&#xff0c;寻找行业数字化转型新动能、新视角&#xff0c;为保险科技…