【vue2+elementui】记录el-upload导入文件:只上传一个文件,且再次上传会覆盖上一个文件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
使用on-change实现,因为:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
<div class="batch-import-contain">
<el-button type="primary" size="mini">下载模板</el-button>
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
accept=".xls,.xlsx,.csv,.et,.ett,.xlt"
:multiple="false"
:file-list="fileList"
:on-change="onchange"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<p>点击或将文件拖拽到这里上传</p>
<p>支持扩展名:.xls .xlsx .csv .et .ett .xlt...</p>
</div>
</el-upload>
</div>
export default {
name: 'batchImport',
data() {
return {
fileList: [],
}
},
methods: {
onchange(file, fileList) {
console.log(file, fileList, 'file, fileList)')
if(fileList.length > 1) {
fileList.splice(0, 1) // 将第一个删掉
}
// 写在if外面,因为:第一个只有一个文件时也许将fileList保存在this.fileList里面
this.fileList = fileList
},
},
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)