【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.rhkb.cn/news/322053.html

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

相关文章

nlp课设 - 基于BERT 的情感分类

基于BERT 的情感分类 主要论文&#xff1a; BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding&#xff08;双向Transformer 的预训练&#xff09; 核心技术&#xff1a; Embedding 、Attention --> Transformer 任务简介、拟解决问题…

音源分离|数据集|MUSDB18-HQ

一、说明 MUSDB18-HQ是MUSDB18数据集的未压缩版本。它由总共150首不同风格的完整歌曲组成&#xff0c;包括立体声混音和原始源&#xff0c;分为训练子集和测试子集。 其目的是作为设计和评估源分离算法的参考数据库。这种信号处理方法的目的是从一组混合物中估计一个或多个源&a…

2023年谷歌拒了228万应用,禁了33.3万账号,开发者们应如何应对2024的挑战?

谷歌在上周一公布了去年如何应对恶意应用和恶意行为。 报告指出&#xff0c;去年谷歌在Google Play平台上&#xff0c;通过不断升级安全系统、更新政策规定、运用先进的机器学习技术&#xff0c;以及严格把关应用审核流程&#xff0c;成功阻止了高达228万个不合规的应用程序上架…

2024牛客五一集训派对day2 Groundhog Looking Dowdy 个人解题思路

前言&#xff1a; 被实验室教练要求要打的这次五一牛客的训练赛&#xff0c;这些区域赛难度的题对于大一的我来说难度实在是太高了&#xff0c;我和我的队友只写了一些非常简单的签到题&#xff0c;其他题目都没怎么看&#xff08;我们太弱了&#xff09;&#xff0c;但我可以分…

使用Gradio搭建聊天UI实现质谱AI智能问答

使用Gradio搭建聊天UI实现质谱AI智能问答 一、调用智谱 AI API二、使用Gradio搭建聊天UI三、将流式处理添加到交互式聊天机器人 一、调用智谱 AI API 1、获取api_key 智谱AI开放平台网址&#xff1a; https://open.bigmodel.cn/overview 2、安装库pip install zhipuai 3、执…

[笔试训练](十六)

目录 046:字符串替换 047:神奇数 048:DNA序列 046:字符串替换 字符串替换_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 简单模拟题~ class StringFormat { public:string formatString(string str, int n, vector<char> arg, int m) {strin…

API开发的必备神器:华为云CodeArts API实用体验入门篇

今天我想给大家推荐一款API全生命周期研发与管理工具&#xff1a;华为云CodeArts API。 作为互联网软件的开发者&#xff0c;在软件研发的过程中&#xff0c;API的开发、调试、测试是必不可少的。之前我使用的是Postman这类工具来辅助开发&#xff0c; Postman在接口调试方面确…

WPF TextBox文本框 输入提示

思路 Grid标签里面创建Label和TextBox&#xff0c;这是一个整体。 TextBox 为空显示 Label OR TextBox 不为空隐藏 Label 。 注意 两个标签的前后顺序。 TextBox文本的背景颜色设置为透明&#xff0c;不然会无法看到 Label 内容。 ElementNametxtStoreName&#xff1a;指定…

Microsoft Universal Print 与 SAP 集成教程

引言 从 SAP 环境打印是许多客户的要求。例如数据列表打印、批量打印或标签打印。此类生产和批量打印方案通常使用专用硬件、驱动程序和打印解决方案来解决。 Microsoft Universal Print 是一种基于云的打印解决方案&#xff0c;它允许组织以集中化的方式管理打印机和打印机驱…

Shell变成规范与变量

目录 1. Shell脚本 1.1 Shell脚本概述 1.2 Shell的作用 1.3 Shell脚本的构成 2. 重定向与管道操作 2.1 交互式硬件设备 ​ 2.2 重定向操作 3. shell变量 3.1 自定义变量 3.2 变量的作用范围​编辑 3.3 整数变量的运算 4. 环境变量 4.1 特殊的Shell变量 4.2 只读变…

【Flask 系统教程 5】视图进阶

类视图 在 Flask 中&#xff0c;除了使用函数视图外&#xff0c;你还可以使用类视图来处理请求。类视图提供了一种更为结构化和面向对象的方式来编写视图函数&#xff0c;使得代码组织更清晰&#xff0c;并且提供了更多的灵活性和可扩展性。 创建类视图 要创建一个类视图&am…

家用洗地机应该怎么选?哪个牌子好?市场上主流洗地机品牌推荐

洗地机的出现&#xff0c;让越来越多的家庭享受清洁的过程&#xff0c;给人们腾出来更多的时间陪伴家人和休息。但是在选购一台洗地机前&#xff0c;大家多多少少肯定有些疑问&#xff0c;洗地机到底实不实用&#xff1f;好不好用&#xff1f;能扫干净吗&#xff1f;还有哪些好…

什么样的行业适合做私域?

私域营销适用于各种行业&#xff0c;但以下几个行业尤其适合进行私域营销&#xff1a; 1、零售行业&#xff1a;私域营销可以帮助零售企业建立与顾客的直接联系&#xff0c;提高顾客忠诚度和复购率。通过私域营销&#xff0c;零售企业可以进行个性化推荐、定制化服务&#xff…

Konga域名配置多个路由

云原生API网关-Kong部署与konga基本使用 Nginx server{listen 443 ssl;location / {proxy_pass http://127.0.0.1:8100;}location /openApi {proxy_pass http://172.31.233.35:7100/openApi;} } Kong {"id": "f880b21c-f7e0-43d7-a2a9-221fe86d9231&q…

vue视图不刷新强制更新数据this.$forceUpdate()

在vue中&#xff0c;更新视图数据&#xff0c;不刷新页面&#xff0c;需要强制更新数据才可以 前言 在对数据就行添加和删除时&#xff0c;发现页面视图不更新&#xff0c;排除发现需要强制更新才可以 点击添加或删除&#xff0c;新增数据和删除就行&#xff0c;但在不使用fo…

指定地区|CSC高级研究学者赴澳大利亚访学交流

CSC高级研究学者均是正高或博导级的&#xff0c;学术背景较强&#xff0c;多数能DIY联系到国外合作机构。但也有些申请者因指定地域或学校&#xff0c;或须在短期内获取邀请函故而求助于我们。本案例D教授就指定澳大利亚的墨尔本地区&#xff0c;我们最终用维多利亚大学的邀请函…

智能化采购管理系统助力光伏行业提高效率

光伏行业是指太阳能电池板的制造、安装和维护等相关产业&#xff0c;是新能源领域的重要组成部分。近年来&#xff0c;随着全球对于环保和可持续发展的重视&#xff0c;光伏行业进入全球化和智能化的新阶段。光伏企业开始加强国际合作&#xff0c;推广智能化技术&#xff0c;提…

vue3+ts+vant选择器选中文字效果

所需要的样式: 选中某个选项后文字有放大和改变颜色的效果 主要就是在van-picker上加class, 给对应的style样式即可 <van-pickerclass"custom-picker":title"pickerData.titleText"v-if"pickerData.ispicker"show-toolbar:columns"col…

数据结构——排序算法分析与总结

一、插入排序 1、直接插入排序 核心思想&#xff1a;把后一个数插入到前面的有序区间&#xff0c;使得整体有序 思路&#xff1a;先取出数组中第一个值&#xff0c;然后再用tmp逐渐取出数组后面的值&#xff0c;与前面的值进行比较&#xff0c;假如我们进行的是升序排序&…

代谢组数据分析七:从质谱样本制备到MaxQuant搜库

前言 LC-MS/MS Liquid Chromatography-Mass Spectrometry&#xff08;LC-MS/MS &#xff0c;液相色谱-质谱串联&#xff09;可用于残留化合物检测、有机小分子检测、鉴定和定量污染物以及在医药和食品领域添加剂检测和生物小分子等检测。 LC-MS/MS一般包含五个步骤&#xff…