vue-simple-uploader的fileAdded方法不支持异步的解决办法,autoStart 设置

news2024/11/18 13:35:15

每日鸡汤:悲观者可能正确,但是乐观者往往成功

假设有一个需求,上传的pdf文档不得大于10M

使用 vue-simple-uploader 这个插件,我们需要在 fileAdded 事件里面进行校验,在1.0.0版本以后,如果想停止上传,那么就 return false, 继续上传 return true

vue-simple-uploader - npmA Vue.js upload component powered by simple-uploader.js. Latest version: 0.7.6, last published: 3 years ago. Start using vue-simple-uploader in your project by running `npm i vue-simple-uploader`. There are 81 other projects in the npm registry using vue-simple-uploader.https://www.npmjs.com/package/vue-simple-uploader/v/1.0.1但是,有一个坑,现在【2023年7月25日】fileAdded这个方法不支持异步,也就是说下面的代码并不会阻止文件上传

// 这是一个有问题的方法,return false 并不会阻止文件上传
const fileAdded = async (rootFile: any) => {
	const size = rootFile.size
	// 理想的是,等待 checkFun 方法返回,再决定是否继续上传
	const canUpload = await checkFun(size)
	if (!canUpload) {
		return false
	}
	return true
}

解决办法是

  1.  设置 autoStart = "false" 【默认是true】
  2. 调用 this.$refs.uploaderRef.uploader.upload() 方法手动上传
<uploader
    ref="uploaderRef"
	class="uploader"
	:options="options"
	:file-status-text="statusText"
	@fileAdded="fileAdded"
	:autoStart="false"
	@fileSuccess="fileSuccess"
	@uploadStart="uploadStart"
	@fileError="fileError"
	>
			<!-- 其他内容 -->
</uploader>

// 这个方法没有问题
const fileAdded = async (rootFile: any) => {
	const size = rootFile.size
	const canUpload = await checkFun(size)
	if (canUpload) {
		// 校验通过,手动调用上传方法
		this.$refs.uploaderRef.uploader.upload()
	}
}

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

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

相关文章

如何快速用Python获取短信验证码

在Python中获取短信验证码需要通过调用短信服务接口或者使用短信网关来实现。具体实现方式取决于你使用的短信服务提供商或者短信网关的API。 一般来说&#xff0c;你需要以下步骤来获取短信验证码&#xff1a; 选择短信服务提供商或者短信网关 你需要选择一个合适的短信服务…

vue利用echarts简单实现具有中心节点的知识图谱

效果展示 边缘节点可拖动&#xff0c;其大小可以根据传入的值而变化&#xff08;比如我更喜欢芒果&#xff0c;所以给了芒果更大的权值&#xff0c;在显示的时候芒果所在的节点显示的比例更大&#xff09; 代码下载 https://download.csdn.net/download/David_house/881151…

汉明距离,两个整数之间的 汉明距离 指的是这两个数字对应二进制位不同的位置的数目。

题记&#xff1a; 两个整数之间的 汉明距离 指的是这两个数字对应二进制位不同的位置的数目。 给你两个整数 x 和 y&#xff0c;计算并返回它们之间的汉明距离。 示例 1&#xff1a; 输入&#xff1a;x 1, y 4 输出&#xff1a;2 解释&#xff1a; 1 (0 0 0 1) 4 (0 1 0 0…

家用取暖器北美UL 1278测试要求内容

取暖器是指用于取暖的设备&#xff0c;取暖设备根据加热介质不同、加热原不同&#xff0c;大体可以分为&#xff1a;燃气取暖设备、电加热取暖设备、锅炉取暖设备、电壁挂炉取暖。但一般这类产品要上架美国亚马逊平台都必须要办理UL1278测试报告。 适用产品范围&#xff1a; …

苍穹外卖-day02

苍穹外卖-day02 本项目学自黑马程序员的《苍穹外卖》项目&#xff0c;是瑞吉外卖的Plus版本 功能更多&#xff0c;更加丰富。 结合资料&#xff0c;和自己对学习过程中的一些看法和问题解决情况上传课件笔记 视频&#xff1a;https://www.bilibili.com/video/BV1TP411v7v6/?sp…

机器学习|分类入门

顾名思义&#xff0c;分类就是把事物“分类”成子类别的任务。但是&#xff0c;被一台机器&#xff01;如果这听起来并不多&#xff0c;想象一下你的电脑能够区分你和陌生人。在土豆和西红柿之间。在A和F之间。现在听起来很有趣。分类是监督机器学习的一部分&#xff0c;我们将…

Linux内核中的链表、红黑树和KFIFO

lLinux内核代码中广泛使用了链表、红黑树和KFIFO。 一、 链表 linux内核代码大量使用了链表这种数据结构。链表是在解决数组不能动态扩展这个缺陷而产生的一种数据结构。链表所包含的元素可以动态创建并插入和删除。链表的每个元素都是离散存放的&#xff0c;因此不需要占用连…

红黑树深入剖析【C++】

目录 一、红黑树概念 二、红黑树节点结构设计 三、插入操作 处理情况1 处理情况2 处理情况3 插入总结&#xff1a; 四、插入操作源码 五、红黑树验证 一、红黑树概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0…

备战秋招 | 笔试强训17

目录 一、选择题 二、编程题 三、选择题题解 四、编程题题解 一、选择题 1、假设A为抽象类&#xff0c;下列声明&#xff08;&#xff09;是正确的 A. int fun(A); B. A Obj; C. A fun(int); D. A *p; 2、虚函数可不可以重载为内联&#xff1f; A. 可以 B. 不可以 C. 语法…

WEB 文件包含 /伪协议

首先谈谈什么是文件包含 WEB入门——文件包含漏洞与PHP伪协议_文件包含php伪协议_HasntStartIsOver的博客-CSDN博客 文件包含 程序员在编写的时候 可能写了自己的 函数 如果想多次调用 那么就需要 重新写在源代码中 太过于麻烦了只需要写入 funcation.php然后在需要引用的地…

【HarmonyOS】ArkTS 组件内转场动画,动画播放时颜色异常问题

【关键字】 HarmonyOS、ArkTS、组件内转场动画、颜色异常 【问题描述】 根据组件内转场动画文档中示例编写代码&#xff0c;使用动画转场组件button&#xff0c;并给button设置背景色让button透明度为0&#xff0c;实现动画转场时&#xff0c;会先出现默认蓝色button&#xf…

图片转pdf手机版免费?这几款转换软件看看

图片转pdf手机版免费&#xff1f;将图片转换成PDF文件可以带来很多好处。首先&#xff0c;PDF文件可以更好地保护你的图片。相对于图片文件&#xff0c;PDF文件更难以编辑和改变&#xff0c;因此更适合用于存储重要的图片。其次&#xff0c;将多张图片合并成一个PDF文件可以更好…

LViT:语言与视觉Transformer在医学图像分割

论文链接&#xff1a;https://arxiv.org/abs/2206.14718 代码链接&#xff1a;GitHub - HUANGLIZI/LViT: This repo is the official implementation of "LViT: Language meets Vision Transformer in Medical Image Segmentation" (IEEE Transactions on Medical I…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(11)-Fiddler设置安卓手机抓包,不会可是万万不行的!

1.简介 Fiddler不但能截获各种浏览器发出的 HTTP 请求&#xff0c;也可以截获各种智能手机发出的HTTP/ HTTPS 请求。 Fiddler能截获 Android 和 Windows Phone 等设备发出的 HTTP/HTTPS 请求。 今天宏哥讲解和分享Fiddler 如何截获安卓移动端发出的 HTTP/HTTPS 请求。 2.环…

32路智能存储柜锁控板的功能有哪些?

智能存储柜是一款基于物联网可以完成柜门自动开启、物品监控、管理的设备&#xff0c;凭借着出色的智能化和自动化功能&#xff0c;智能柜已逐步取代传统的储物柜。但现有的智能存储柜锁控板性存在着一系列的问题&#xff0c;如控制路数少、稳定性差、成本高、线路连接不便等&a…

CTF线下赛AWD知识点【持续完善ing】

文章目录 CTF线下赛AWD知识点AWD规则前期准备SSH登录口令登录密钥登录 改密码SSH密码修改mysql密码修改 备份数据备份目录备份数据库 查找后门 自动提交flag防御思路基础查杀寻找最近20分钟修改过的文件寻找行数最短的文件关键字查杀查找命令执行函数 文件监控杀不死马0x01.杀进…

带你简单认识淘宝API及相关的业务场景介绍

淘宝API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范。通过开放接口&#xff0c;开发者可以不改变现有系统&#xff0c;直接在原有系统上实现新功能。该规范于2007年发布&#xff0c;是目前业界唯一完整覆盖电商系统各相关业务领域的接口标准&am…

RCU 使用及机制源码的一些分析

》内核新视界文章汇总《 文章目录 1 介绍2 使用方法2.1 经典 RCU2.2 不可抢占RCU2.3 加速版不可抢占RCU2.4 链表操作的RCU版本2.5 slab 缓存支持RCU 3 源码与实现机制的简单分析3.1 数据结构3.2 不可抢占RCU3.3 加速版不可抢占RCU3.4 可抢占RCU3.5 报告禁止状态3.6 宽限期的开…

tinkerCAD案例:16. Spin Circuit Assembly 自旋电路组装

tinkerCAD案例&#xff1a;16. Spin Circuit Assembly 自旋电路组装 原文 In this tutorial, you’ll learn how to make a monkey with spinning arms using the Spin Circuit Assembly, which combines a spinning hobby gearmotor with 2xAAA batteries. 在本教程中&#…