在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步。。。
这个体验太差了。
无奈只能手动实现,设置 on-success 和 on-remove 的回调处理。
模板代码
<div id="upload_file">
<el-upload
class="upload-demo"
action="/api/upload"
:on-success="handle_success"
:on-remove="handle_remove"
:on-preview="handlePreview"
:before-remove="beforeRemove"
multiple
:limit="5"
:on-exceed="handleExceed"
:before-upload="uploadBefore"
accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"
:file-list="fileList">
<el-button size="small" type="primary">Click to Upload</el-button>
</el-upload>
</div>
JS 代码
var vm = new Vue({
el: "#upload_file",
data: {
fileList: []
},
mounted: function() {
},
methods: {
handle_remove(file, fileList) {
var _tmp = this.fileList;
for (var i = 0, len = _tmp.length; i < len; i++) {
if (_tmp[i].name = file.name) {
_tmp.splice(i, 1);
break;
}
}
this.fileList = _tmp;
},
handle_success(response, file, fileList) {
this.fileList.push({
name: file.name,
url: file.response
});
},
handlePreview(file) {
console.log(file);
},
uploadBefore(file) {
if (file.size > 10 * 1024 * 1024) {
this.$message.error("File size exceeded 10M!");
return false;
}
},
handleExceed(files, fileList) {
this.$message.warning(`Number of files exceeded 5!`);
},
beforeRemove(file, fileList) {
return this.$confirm(`Remove ${ file.name }?`, {
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel'
});
}
}
});
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式
谈笑风生
小飞侠 (来自: 中国 广东 广州 电信) 4年前
Raymond (来自: 中国 上海 上海 移动) 3年前