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

上传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('上传成功')
		}
	}

最后

以上就是热心水壶为你收集整理的element上传不提交，点击提交触发上传的全部内容，希望文章能够帮你解决element上传不提交，点击提交触发上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。