1.实现最多上传十张图片,超出十张info弹窗提示,(此处可以单独上传超出十张,也可同时上传超出十一张)如图所示
2.用到的组件和涉及到的方法(el-uplaod)
3.上传第十一个附件的时候点击上传附件按钮弹窗提示而不是调起系统的文件窗口需要设置slot
<el-button:slot="fileList.length == limit ? 'tip' : 'trigger'"
class="upload-btn"
:size="listType !== 'textCard'?'small' : 'mini'"
:disabled="disabled"
@click="isShowTip"
type="primary">上传附件</el-button>
isShowTip () {
console.log('开始上传', this.fileList)
if (this.fileList.length == this.limit) {
// 处理单次上传文件个数超出limit on-exceed方法
EventBus.$emit('warning', `最多只能上传${this.limit}个文件`)
}
},
3.一次上传超过十个附件,弹窗提示超出用到on-exceed方法;limit是upload属性指向最大上传数
<el-upload action="#"
:file-list="fileList"
:class="[listType==='textCard' ? 'textCard' : '']"
:limit="limit"
:on-exceed="_handleExceed">
_handleExceed () {
// 处理单次上传文件个数超出limit on-exceed方法
EventBus.$emit('warning', `最多只能上传${this.limit}个文件`)
},