使用on-change实现,因为:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
javascript
<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>
javascript
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
},
},
}