element-upload

<el-upload
ref="fileUpload"
:action="url" // 必选参数，上传的地址
:on-change="fileListChange" // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
:on-success="uploadSuccess" // 文件上传成功时的钩子
:before-upload="beforeUpload" // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
:on-remove="onRemove" // 文件列表移除文件时的钩子
:file-list="fileList" // 上传的文件列表, 例如: [{name: ‘food.jpg‘, url: ‘https://xxx.cdn.com/xxx.jpg‘}]
accept=".xls, .xlsx"
>
<el-button
size="small"
type="primary"
:loading="提交中"
:disabled="percentage!==100 && fileList.length"
>选取文件</el-button>
</el-upload>

data(){
return {
url: ‘https://slpsit.cnsuning.com/rest/getImgUrl.action‘,
fileList: [],
fileUrl: ‘‘,
fileName: ‘‘
}
},
methods: {
fileListChange(file, fileList) {
console.log(file, fileList) // 会调取2遍，添加文件、上传成功时都会被调用
fileList.splice(0, fileList.length - 1) // 取最后一个
this.fileList[0] = file
this.fileName = file.name
},
// 文件上传成功时的钩子
async uploadSuccess(response, file, fileList) {
if (response.code && response.code === ‘1‘) {
this.fileUrl = response.data.imageUrl[0]
this.fileName = file.name
this.解析上传文件(this.fileUrl, this.fileName)
this.提交中 = false
} else {
this.fileUrl = ‘‘
this.fileName = ‘‘
this.$message.error(‘上传文件格式有误，请使用模板重新提交！‘)
}
},
beforeUpload(file) {
this.提交中 = true
let isLimit = file.size / 1024 / 1024 < 50
if (!isLimit) {
this.$message.error(‘文件最大限制50M！‘)
}
return isLimit
},
onRemove(file) {
this.tableData = []
this.fileList = []
this.fileUrl = ‘‘
this.fileName = ‘‘
this.提交中 = false
this.loading2 = false
this.totalCorrectCount = 0
this.totalCount = 0
this.totalErrorCount = 0
this.totalFee = ‘‘
this.percentage = 0
},
}

原文：https://www.cnblogs.com/gengxinnihaoma/p/12929094.html