【vue+el-upload】当action=“#“,代表不使用默认上传,使用自定义上传,http-request获取文件流

el-upload有多种上传行为:

1、立即上传:
当 action 属性被赋予一个有效的 URL 时,一旦用户选择了文件,el-upload 组件会立即自动将文件上传到指定的服务器地址。
2、不立即上传(自定义触发):
如果 action 属性被设置为 “#” 或者不指定,同时通过 :http-request=“uploadFile” 属性自定义上传方法,那么上传行为将不会自动触发。在这种情况下,可以自定义何时触发上传,例如,通过一个按钮点击事件来调用组件的上传方法。
3、手动触发上传:
即便 action 属性被赋予了一个 URL,仍然可以通过设置 :auto-upload=“false” 来禁止自动上传。这样,可以通过调用组件的 submit() 方法来手动触发上传。
4、还有拖拽上传、限制文件数量上传、照片墙、缩略图上传等,不是本文讨论的重点

用的比较多的还是立即上传

立即上传最基本的就是要有上传地址,上传的请求头部和上传成功之后的一些逻辑操作。其他的都是可以根据项目的需求,需要了再添加,如需要拖拽,需要多选,需要携带额外参数,需要限制接受的类型等
以文档上的示例举例:
在这里插入图片描述

1、action是后端给的上传地址,在项目中一般这样写,环境变量+拼接的地址

  :action="uploadUrl"uploadUrl:`${process.env.VUE_APP_BASE_API}/common/upload`

2、 on-success,上传成功之后的回调,主要就是拿name等一些字段展示到页面上

  :on-success="upLoadSuccess"upLoadSuccess(res, file, fileList) {this.fileItem = resthis.fileItem.name = file.namethis.imgChange(res.fileName)},

3、headers,这个示例上没有,但是一般都是需要设置的,因为大多数的项目都是需要身份验证的,如果在 headers 中没有提供必要的认证信息,上传请求可能会因为没有有效凭证而被拒绝。

 :headers="headers"headers: {Authorization: 'Bearer ' + getToken(),},

本文主要说的是不立即上传(自定义触发)

1、headers要设置
2、action=“#”
3、:http-request=“httpRequest”(重点,自定义触发函数)
4、如果需要携带额外的参数, :data=“otherParamdata”,自己定义otherParamdata对象就行

 <el-uploadref="upload"class="avatar-uploader"accept=".xlsx, .xls":headers="headers"   action="#"  :data="otherParamdata"drag:http-request="httpRequest"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div></el-upload><el-button type="primary" @click="sure">确 定</el-button>
 :headers="headers"headers: {Authorization: 'Bearer ' + getToken(),},

如果你想打印看是否赋值成功,直接打印this.formData拿到的会是一个空对象,因为这不是JavaScript的普通对象,可以 这样打印
const file = this.formData.get(‘file’);
console.log(file,‘file’); //输出文件对象

 httpRequest(data) {  const formData = new FormData() // 创建 FormData 对象formData.append('file', data.file) // 添加文件到 FormDataformData.append('id', data.data.id);this.formData = formData},

当点击确定按钮触发上传文件的时候

 sure() {//调用后端接口,将文件流传过去exportExcel(this.formData).then(res => {if (res && res.code == 200) {this.$message.success('上传成功')}})}

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

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

相关文章

第9章 负载均衡集群日常维护

一个设计良好的高可用负载均衡集群&#xff0c;交付使用以后并不能一劳永逸。欲使其高效、稳定、持续对外服务&#xff0c;日常维护必不可少。 对于高可用负载均衡集群来说&#xff0c;有两种类型的维护形式&#xff1a;常规性维护与突发性维护。突发性维护一般指故障处理&…

Windows Server 2022 环境下WEB和DNS服务器配置方法

目录 实验名称&#xff1a;WEB和DNS服务器配置实验目的实验原理&#xff1a;主要设备、器材&#xff1a;实验内容&#xff1a;配置本地WEB站点配置本地DNS服务器 实验名称&#xff1a;WEB和DNS服务器配置 实验目的 掌握 Windows Server 2022 环境下WEB服务器配置方法 掌握 Wi…

pip镜像源

1.1 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple 1.2 阿里云 https://mirrors.aliyun.com/pypi/simple/ 1.3 网易 https://mirrors.163.com/pypi/simple/ 1.4 豆瓣 https://pypi.douban.com/simple/ 1.5 百度云 https://mirror.baidu.com/pypi/simple/ 1.6 中科大 ht…

Echarts漏斗图的作用和配置项,一文告诉你。

一、什么是漏斗图 ECharts漏斗图是一种数据可视化图表&#xff0c;它通常用于展示一系列事件或流程中的转化率、漏斗效应等信息。漏斗图的形状类似于漏斗&#xff0c;上部较宽&#xff0c;下部较窄&#xff0c;可以将数据按照一定的比例展示在不同的漏斗区域中&#xff0c;从而…

vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期

记录一个小tips之项目中遇到使用vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期&#xff0c;只需要设置一个属性值:disabled-date"disabledDate"就可以了。 <el-date-picker v-model"ruleForm.tIntendedDateofDeparture" value-format&…

JavaEE企业级开发中常用的Stream流

介绍 在Java编程中&#xff0c;Stream流是Java 8引入的一个重要概念&#xff0c;它提供了一种新的处理集合的方式&#xff0c;可以更加简洁、高效地进行数据操作。Stream流支持各种常见的操作&#xff0c;比如过滤、映射、排序、聚合等&#xff0c;同时也支持并行处理&#xf…

PDF文件转换为CAD的方法

有时候我们收到一个PDF格式的设计图纸&#xff0c;但还需要进行编辑或修改时&#xff0c;就必须先将PDF文件转换回CAD格式。分享两个将PDF转换回CAD的方法&#xff0c;一个用到在线网站&#xff0c;一个用到PC软件&#xff0c;大家根据情况选择就可以了。 ☞在线CAD网站转换 …

JAVA实验项目(二): 抽象类、接口的定义与使用

实验项目二 抽象类、接口的定义与使用 Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&…

解决el-upload组件上传文件403 Forbidden的问题

话不多说&#xff0c;上错误。网络显示&#xff1a; 控制台显示&#xff1a; 并且后端也没接收到任何的请求。 只需要把前端中的组件&#xff1a; action的路径修改为&#xff1a; 也就是不写前面的localhost&#xff0c;而是拼接上发送请求拼接的‘api’即可 可以看到&#x…

鸿蒙ArkUI开发:常用布局【相对布局】

相对布局&#xff08;RelativeContainer&#xff09; 相对布局可以让子元素指定兄弟元素或父容器作为锚点&#xff0c;基于锚点做位置布局必须为RelativeContainer及其子元素设置ID&#xff0c;用于指定锚点信息。未设置ID的子元素不会显示RelativeContainer ID为“__containe…

MM模块学习二 (供应商,物料后台相关配置)

公司代码配置 新建条目&#xff08;只是建了一个名字出来&#xff0c;后面很多表都是没有得&#xff09; 接下来定义公司代码&#xff1a; 公司代码复制完成&#xff08;后续修改交给财务顾问去做&#xff09; 复制工厂&#xff1a; 复制工厂完成&#xff1a; 修改复制过去的工…