踩坑总结!elementUI组件之upload上传控件的multiple属性,设置false报错!
在使用elementUI组件中的upload上传按钮控件的时候,其中的multiple属性决定了是否可以 多选文件 ,首先看一下官方文档:
看到multiple参数的类型是boolean,如果简单的以为“它的值要么是true,要么是false”,那就错了,完美踩坑!!!
仔细看一下demo中的代码:
一、demo1的用法:可多选,最多同时选择3个文件
代码语言:javascript复制<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
二、demo2的用法:可多选,无个数限制
代码语言:javascript复制<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
三、demo3的用法:可多选,无个数限制(但是控制台会报错!)
代码语言:javascript复制<el-upload
class="pic"
multiple="true"
:http-request="handlePicUpload"
:data="extraData"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="text">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip">只能上传jpg/png文件</div>
</el-upload>
四、当我们不想同时选择多个文件时,只需要不设置该属性即可:
代码语言:javascript复制<el-upload
class="pic"
:http-request="handlePicUpload"
:data="extraData"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="text">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip">只能上传jpg/png文件</div>
</el-upload>
总结:
multiple属性虽然是Boolean类型的,但不能将其值设置为true或者false!!!(控制台都能看到错误提示)
给控件加了multiple属性,就表示可以多选,通过limit设置多选的个数限制,当不需要多选(只想单选文件)时,不加multiple属性即可。