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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 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('上传成功')
		}
	}