【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.mzph.cn/bicheng/8622.shtml

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

相关文章

网贷大数据查询要怎么保证准确性?

相信现在不少人都听说过什么是网贷大数据&#xff0c;但还有很多人都会将它跟征信混为一谈&#xff0c;其实两者有本质上的区别&#xff0c;那网贷大数据查询要怎么保证准确性呢?本文将为大家总结几点&#xff0c;感兴趣的朋友不妨去看看。 想要保证网贷大数据查询的准确度&am…

【第13章】spring-mvc之validator

文章目录 前言一、准备1. 引入库2. add.jsp3. show.jsp 二、代码部分1.实体类2. 控制器类3. 效果4. 展示 总结 前言 【第20章】spring-validator 虽然前面已经在spring介绍过&#xff0c;但是为了保证代码可用&#xff0c;还是会从头讲到尾&#xff0c;尽量把关键点列出来讲给…

vue3实现电子签名的方法

vue3实现电子签名且对电子签名可进行修改画笔粗细、画笔颜色、撤销、清屏、保存等功能。 实现效果&#xff1a;查看源码 第一种&#xff1a;通过canvas <div class"signaturePad-Box w100 h100 flex-center"><el-space class"mb10" size"…

【大模型认识】警惕AI幻觉,利用插件+微调来增强GPT模型

文章目录 一. 大模型的局限1. 大模型不会计算2. 甚至明目张胆的欺骗 二. 使用插件和微调来增强GPT模型1. 模型的局限性2. 插件来增强大模型的能力3. 微调技术-提高特定任务的准确性 一. 大模型的局限 1. 大模型不会计算 LLM根据给定的输入提示词逐个预测下一个词&#xff08;…

【人工智能基础】RNN实验

一、RNN特性 权重共享 wordi weight bais 持久记忆单元 wordi weightword baisword hi weighth baish 二、公式化表达 ht f(ht - 1, xt) ht tanh(Whhht - 1 Wxhxt) yt Whyht 三、RNN网络正弦波波形预测 环境准备 import numpy as np import torch from tor…

OpenNJet产品体验-手把手在Ubuntu20.04系统从零部署到应用OpenNJet

目录 一、引言 二、OpenNJet产品安装 2.1下载OpenNJet安装包 2.2安装OpenNJet V2.0.1 ​2.3快速启动并测试OpenNJet 三、OpenNJet产品应用体验 3.1配置OpenNJet 3.2 部署 Web 应用程序 3.3启动 NJet 3.4访问 Web 应用程序 四、总结 一、引言 OpenNJet应用引擎是高性…

[iOS]从拾遗到Runtime(上)

[iOS]从拾遗到Runtime(上) 文章目录 [iOS]从拾遗到Runtime(上)写在前面名词介绍instance 实例对象class 类对象meta-class 元类对象为什么要有元类&#xff1f; runtimeMethod(objc_method)SEL(objc_selector)IMP 类缓存(objc_cache)Category(objc_category) 消息传递消息传递的…

大模型微调之 在亚马逊AWS上实战LlaMA案例(四)

大模型微调之 在亚马逊AWS上实战LlaMA案例&#xff08;四&#xff09; 在 Amazon SageMaker JumpStart 上微调 Llama 2 以生成文本 Meta 能够使用Amazon SageMaker JumpStart微调 Llama 2 模型。 Llama 2 系列大型语言模型 (LLM) 是预先训练和微调的生成文本模型的集合&#x…

C++string续

一.find_first_of与find 相同&#xff1a;都是从string里面找字符&#xff0c;传参格式一样(都可以从某个位置开始找) 不同&#xff1a;find_first_of只能找字符&#xff0c;find可以找字符串 find_first_of参数里面的string与char*是每个字符的集合&#xff0c;指找出string…

普通组件的注册-局部注册和全局注册

目录 一、局部注册和全局注册-概述 二、局部注册的使用示例 三、全局注册的使用示例 一、局部注册和全局注册-概述 组件注册有两种方式&#xff1a; 局部注册&#xff1a;只能在注册的组件内使用。使用方法&#xff1a;创建.vue文件&#xff0c;在使用的组件内导入并注册。…

QX-mini51单片机学习-----(3)流水灯

目录 1宏定义 2函数的定义 3延时函数 4标准库函数中的循环移位函数 5循环移位函数与左移和右移运算符的区别 6实例 7keil中DeBug的用法 1宏定义 是预处理语句不需要分号 #define uchar unsigned char//此时uchar代替unsigned char typedef是关键字 后面是接分号…

Java特性之设计模式【代理模式】

一、代理模式 概述 在代理模式&#xff08;Proxy Pattern&#xff09;中&#xff0c;一个类代表另一个类的功能。这种类型的设计模式属于结构型模式 在代理模式中&#xff0c;我们创建具有现有对象的对象&#xff0c;以便向外界提供功能接口 主要解决&#xff1a; 在直接访问…

项目管理-项目资源管理2/2

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 资源管理&#xff1a;6个过程“硅谷火箭管控” ①规划资源管理&#xff1a; 写计划 ②估算活动资源&#xff1a;估算团队资源&…

PPP点对点协议

概述 Point-to-Point Protocol&#xff0c;点到点协议&#xff0c;工作于数据链路层&#xff0c;在链路层上传输网络层协议前验证链路的对端&#xff0c;主要用于在全双工的同异步链路上进行点到点的数据传输。 PPP主要是用来通过拨号或专线方式在两个网络节点之间建立连接、…

docker-本地私有仓库、harbor私有仓库部署与管理

一、本地私有仓库&#xff1a; 1、本地私有仓库简介&#xff1a; docker本地仓库&#xff0c;存放镜像&#xff0c;本地的机器上传和下载&#xff0c;pull/push。 使用私有仓库有许多优点&#xff1a; 节省网络带宽&#xff0c;针对于每个镜像不用每个人都去中央仓库上面去下…

SQL查询语句(三)范围查找关键字

在上一篇文章中&#xff0c;我们介绍了SQL语句中&#xff0c;逻辑关键字的作用&#xff0c;并举例演示了如何用逻辑关键字来组合WHERE子句。在文章的末尾我们提到了两个用于范围查找的关键字IN和BETWEEN。这两个关键字都可以与NOT关键字灵活组合&#xff0c;起到对字句结果取反…

Jmeter用jdbc实现对数据库的操作

我们在用Jmeter进行数据库的操作时需要用到配置组件“JDBC Connection Configuration”&#xff0c;通过配置相应的驱动能够让我们通过Jmeter实现对数据库的增删改查&#xff0c;这里我用的mysql数据库一起来看下是怎么实现的吧。 1.驱动包安装 在安装驱动之前我们要先查看当前…

【刷题篇】双指针(二)

文章目录 1、有效三角形的个数2、查找总价格为目标值的两个商品3、三数之和4、四数之和 1、有效三角形的个数 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 class Solution { public:int triangleNumber(vector<int>& n…

MQTT服务搭建及python使用示例

1、MQTT协议 1.1、MQTT介绍 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的、基于发布/订阅模式的通信协议&#xff0c;通常用于物联网设备之间的通讯。它具有低带宽、低功耗和开放性等特点&#xff0c;适合在网络带宽有限或者网络连接不稳定…

联发科天玑AI开发套件亮相:开发智能终端生成式AI应用的全面工具

在今日召开的天玑开发者大会2024&#xff08;MDDC 2024&#xff09;上&#xff0c;联发科向外界展示了其最新力作——天玑AI开发套件。该套件是为合作伙伴提供终端生成式AI应用开发的一站式工具包&#xff0c;意在简化并加速开发过程。 联发科推出的天玑AI开发套件包括四大核心…