1、HTML代码
ini
<el-form-item label="文件上传:" prop="files">
<el-upload
ref="upload"
:headers="{
accessToken: getToken(),
}"
class="upload-demo"
:action="UPLOAD_ADDRESS"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:on-remove="handleRemove"
accept=".docx, .doc, .pdf, .ppt"
:file-list="fileList"
multiple
:limit="5"
:on-exceed="handleExceed"
>
<div class="upload_text">
<el-button size="small" icon="el-icon-upload2">上传文件</el-button>
<span slot="tip" class="el-upload__tip">至多上传5个,文件大小不超过20MB,支持扩展名:.doc .docx .pdf .ppt</span>
</div>
</el-upload>
</el-form-item>
注释:headers、action根据具体自己项目而定,上传接口不需要额外的请求头就不需要headers
2、Data
javascript
data() {
return {
formData: {
files: [],
}, // 提交表单数据
fileList: []
}
},
3、function
kotlin
// 1、文件上传之前的方法
handleBeforeUpload(file) {
// console.log(file)
// 如果验证失败,返回 false 来阻止文件上传
const fileSize = Math.round(file.size / 1024 / 1024)
if (fileSize > 20) {
this.$message.error('上传文件过大,请重新选择')
return false
}
return true // 如果验证通过,返回 true 来允许文件上传
},
// 2、文件上传成功要做的操作
handleSuccess(res, file,fileList) {
if (res.success) {
this.$message.success('文件上传成功')
this.formData.files.push({ fileName: res.data.fileName, url: res.data.url })
this.$refs.formRef.clearValidate('files');
} else {
const index = fileList.indexOf(file);
if (index !== -1) {
fileList.splice(index, 1);
}
this.$message.error(res.msg)
}
if (this.formData.files.length >= 5) {
this.$refs.upload.$el.querySelector('.el-upload').style.display = 'none' // 隐藏上传按钮
}
},
// 3、移除已上传文件所做的操作
handleRemove(file, fileList) {
this.fileList = fileList
const index = this.formData.files.findIndex(item => (item.url === file.response?.data.url || item.url === file.url)) // 确定删除的项
if (index !== -1) {
this.formData.files.splice(index, 1) // 删除要删除的项
}
if (this.formData.files.length < 5) {
this.$refs.upload.$el.querySelector('.el-upload').style.display = 'block' // 开启上传按钮
}
},
// 4、文件超出个数限制时的操作
handleExceed() {
this.$message.error('文件最多上传5个,请重新选择上传')
},