upload上传组件点击上传按钮，弹出文件框前出现提示框

最新推荐文章于 2023-04-12 15:19:22 发布

花荞

最新推荐文章于 2023-04-12 15:19:22 发布

阅读量1.7k

点赞数 5

分类专栏： Vue 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/ha_ha_en/article/details/127101732

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客讲述了如何在用户上传文件前增加一个确认步骤，询问所选文件是否为证书。通过在Upload组件上方添加一个Button作为遮罩，并设置点击事件触发确认对话框。当用户点击"是"时，会将fileTag设为true并开始上传；点击"否"则fileTag设为false。使用$refs调用upload组件的点击事件来启动文件选择。博客内容包括具体的HTML和JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

选择文件前，需要询问用户此次选择的文件是否为证书，若是，就会新加一个字段。
在这里插入图片描述

方法

用一个Button放在upload组件上方，形成一个遮罩，点击事件中加上提示框的内容，点击是或否后执行各自的事件，通过 ref 来执行upload的点击事件。

<div style="position: relative;">
	<Upload
		multiple
		type="drag"
		action=""
		:disabled="isUpload"
		:before-upload="customUpload"
		v-if="!hwInfo.overTime"
	>
		// 因为是下面的 div 点击打开文件框，所以 ref 应该放在此处，放在上面没有用
		<div style="padding: 20px 0" ref="upload1">
			<Icon type="ios-cloud-upload" size="52" style="#b4b4b4"></Icon>
			<p>
				<span>上传资料</span>
			</p>
		</div>
	</Upload>
	<Button class="cert-botton" @click="batchImport">遮罩层</Button>
</div>

batchImport() {
	// 上传文件前询问是否为证书
	this.$Modal.confirm({
		title: '此次上传资料是否为证书',
		// content: '<p style="font-size: 16px;"></p>',
		okText: '是',
		cancelText: '否',
		onOk: () => {
			// 点击'是'，fileTag为true，后面根据此字段判断
			this.fileTag = true
			// 通过 upload1 的 ref 触发点击事件
			this.$refs["upload1"].click()
		},
		onCancel: () => {
			this.fileTag = false
			this.$refs["upload1"].click()
		}
	});
},

Button应该隐藏，只需要点击功能，不需要样式：

.cert-botton {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 115px;
	opacity: 0;
}

最终样式：
在这里插入图片描述