Source code
<el-upload ref="uploadExcel" action=" The server address you uploaded " :limit="limitNum" :auto-upload=
"true" accept=".xlsx" :before-upload="beforeUploadFile" :on-change="fileChange"
:on-exceed="exceedFile" :on-success="handleSuccess" :on-error="handleError"
:file-list="fileList" :data="QQQ" > <el-button size="small" plain> Select file </
el-button> <div slot="tip" class="el-upload__tip"> Upload only xlsx(Excel2007) file , And not more than 10M
</div> </el-upload>
Parameter analysis ：
limit Number of files that can be uploaded
auto-upload Can I upload it automatically
accept Uploadable file format
before-upload Hook before uploading file
on-change Hook when file status changes , Add file , Both successful and failed uploads will be called
on-exceed Hook when the number of files exceeds the limit
on-success Hook for successful file upload
on-error Hook in case of file upload failure
file-list List of uploaded files
data Additional parameters attached to upload
data() { return { limitNum: 1, fileList: [] }
Hook function
// Hook before uploading file , The parameter is the uploaded file , If returned false Or go back Promise And was reject, Then stop uploading beforeUploadFile(
file) { // console.log(file) const extension = file.name.substring(file.name.
lastIndexOf('.') + 1) const size = file.size / 1024 / 1024 if (extension !==
'xlsx') { this.$notify.warning({ title: ' warning ', message: ` Upload only Excel（ The suffix is .xlsx） File for `
}) } if (size > 10) { this.$notify.warning({ title: ' warning ', message: ` File size cannot exceed 10M`
}) } }, // Hook when file status changes fileChange(file, fileList) { // console.log(file) //
console.log(fileList) }, // Hook when the number of files exceeds the limit exceedFile(files, fileList) { this.
$notify.warning({ title: ' warning ', message: ` You can only choose ${ this.limitNum } Files , Currently, a total of ${
files.length + fileList.length} individual ` }) }, // Hook for successful file upload handleSuccess(res, file,
fileList) { console.log(res) // this.formData.url = res.data // The file address returned by the server this.
$message({ message: ' File uploaded successfully ', type: 'success' }) this.$refs.uploadExcel.
clearFiles()// Clear the last upload record }, // Hook in case of file upload failure handleError(err, file, fileList) { this
.$message.error(err.msg) },
this.$refs.uploadExcel.clearFiles() Although not eye-catching , Its role cannot be underestimated , here “uploadExcel”, That is here
ref=“uploadExcel”
in summary ： Upload file to server , Basic end .
<> Fanwai ：
If you don't want to upload automatically , Let's have a look button at the end of a sentence to call attention
<el-button type="primary" @click="uploadClick"> True set </el-button> uploadClick() {
this.$refs.uploadExcel.submit() }
If there is something wrong , Welcome to correct !
Technology