element上传不提交,点击提交触发上传

20 篇文章 0 订阅

上传Excel,点击立即导入在请上传

校验:1.文件大小 2.文件类型 3.上传数量

// html
<el-input v-model="(fileList[0] || {}).name" disabled />
<el-upload 
	ref="upload"
	v-model="fileList"
	:file-list="fileList"
	:action="url"
	accept=".xls,.xlsx"
	:show-file-list="false"
	:limit="1"
	:auto-upload="false"
	:on-exceed="handleExceed"
	:on-change="(file, fileList) => {handleChange(file,fileList)}"
	:on-success="handleSuccess"
>
	<el-button>选择文件</el-button>
</el-upload>
<el-button @click="handleSubmit">立即导入</el-button>

// data 
data() {
	return {
		fileList: [],
		url: 'xxxxx', // 请求地址
		uploadResponse: null, // 导入返回的结果
	}
},
// 
methods: {
	// 上传校验
	handleChange(file, fileList) {
		var XLS = false // 判断是否是excel
		if(file.name.split('.')[1] === "xls" || file.name,split('.')[1] === "xlsx"){
			XLS = true
		} else {
			XLS = false
		}
		const isLt5M = file.size / 1024 /1024 < 5 //判断文件是否超出5M
		if(!XLS) this.$message.error('上传文件只能是Excel格式')
		if(!isLt5M ) this.$message.error('文件大小超出5M')
		if(XLS && isLt5M ) this.fileList = fileList
		if(XLS && isLt5M && fileList.length > 1) {
			this.fileList = [fileList[fileList.length - 1]]
		}
		return XLS && isLt5M 
	},
	// 选择文件超过1条,校验
	handleExceed(files, uploadFiles) {
		this.uploadResponse = null
		const file = files[0]
		this.$refs.upload.handleStart(file)
	},
	// 提交验证
	handleSubmit() {
		if(!this.fileList.length) {
			this.$message.error('请上传文件')
			return
		}
		this.$refs.upload.submit()
	},
	// 上传成功回调
	handleSuccess(res) {
		this.$refs.uplad.clearFiles() // 清除上传文件
		this.uploadResponse = res
		if(this.uploadResponse.retCode === 0){
			this.$message.success('上传成功')
		}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值