<el-upload
ref="uploadRef" //給上傳文件綁定一個ref必要時好清空上傳文件數(shù)組
style="margin-left:10px"
:limit="limitNum" //限制上傳文件個數(shù) 這里我一個對象來代替
action="" // 上傳地址
multiple
:auto-upload="false" //自動上傳文件
:show-file-list="false" //是否顯示上傳信息列表
class="upload-demo" // 關(guān)閉前的驗證
:before-upload="beforeUploadFile" //上傳前的驗證
:on-exceed="exceedFile" //超出上傳個數(shù)的驗證
:on-change="fileChange" //上傳文件發(fā)生改變時觸發(fā)change事件
>
<el-button slot="trigger" type="primary">導(dǎo)入文件</el-button>
</el-upload>
——-----------------------------------------------------------------------------------------
fileChange(file, fileList) {
this.beforeUploadFile(file)
if (this.beforeUploadFile(file)) {
this.$refs.uploadRef.clearFiles()
this.fileList.push(file.raw)
this.uploadFile()
} else {
return this.$refs.uploadRef.clearFiles() //清空上傳列表里面的數(shù)據(jù)
}
}
// 文件超出個數(shù)限制時的鉤子
exceedFile(files, fileList) {
this.$message.warning(`只能選擇 ${this.limitNum} 個文件,當(dāng)前共選擇了 ${files.length + fileList.length} 個`)
}
// 上傳之前進(jìn)行處理
beforeUploadFile(file) {
const isLt5M = file.size / 1024 / 1024 < 10
if (this.allowType.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {
this.$message.error({ title: '系統(tǒng)提示', message: `上傳文件只能是 ${this.allowTypeTips} 格式!`
})
return false
}
if (!isLt5M) {
this.$message.error({ title: '系統(tǒng)提示', message: '上傳文件大小不能超過 10MB!' })
return false
} else {
return true
}
}
// 上傳文件
uploadFile() {
if (this.fileList.length === 0) {
this.$message.warning('請選擇文件')
} else {
var file = new FormData()
file.append('file', this.fileList[0])
getBudgetUpload(file).then((res) => {
if (res.code === 0) {
this.totalPage = res.data.list.length
this.tableData = res.data.list
this.$message.success({ title: '系統(tǒng)提示', message: '上傳成功' })
this.fileList = []
} else {
this.$message.error({ title: '系統(tǒng)提示', message: '上傳失敗' })
}
})
}
},