ui部分文章来源：https://www.toymoban.com/news/detail-617406.html
<el-upload
ref="upload"
drag
:file-list="fileList"
:auto-upload="false"
:on-change="onchange"
:on-remove="handleRemove"
action="javascript:void(0)"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
js 实现上传文章来源地址https://www.toymoban.com/news/detail-617406.html
// 上传函数
handleUpload() {
const formData = new FormData()
// fileList 在data中定义的数组，把所有文件放到formData中
this.fileList.forEach((f) => {
formData.append('file', f.raw)
})
// 上传文件 api 【createFileRequest是自己封装的一个接口】
createFileRequest(formData)
.then((res) => {
this.msgSuccess('文件上传成功')
this.fileList = []
})
.catch((e) => {
this.msgError('文件上传失败')
})
},
onchange(file) {
if (file.size / 1024 / 1024 < 100) {
this.fileList.push(file)
} else {
this.msgError('文件过大')
this.handleRemove(file)
}
},
// 文件删除处理
handleRemove(file) {
this.fileList = this.fileList.filter((f) => file.name !== f.name)
}
到了这里，关于element ui ---- el-upload实现手动上传多个文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
