vue的Element组件上传文件el-upload详解(钩子函数、上传组件的初始化、accept的使用、钩子函数自定义额外参数)
<el-uploadaction="''"multiple:http-request="imgUpload"list-type="picture-card":ref="$upload"accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"...
·
<el-upload
action="''"
multiple
:http-request="imgUpload"
list-type="picture-card"
:ref="$upload"
accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
:limit="8"
:file-list="mItem.imageUrls"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
@submit="submitList"
:before-remove="(file, fileList)=>beforeRemove(file, fileList,index,mIndex)">
<span><i class="el-icon-plus" style="font-size:14px;"></i> 添加图片</span>
</el-upload>
上传组件的钩子的使用如上所示,下面为钩子函数的解释
before-remove | 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 | function(file, fileList) |
on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) |
上传组件初始化
this.$refs['$upload'].clearFiles()//初始化导入组件
accept的使用
accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"//图片类型
accept=".mpp,.xls,.xlsx"//文件类型:mpp或者excel
钩子函数自定义额外参数
:before-remove="(file, fileList)=>beforeRemove(file, fileList,index,mIndex)"
更多推荐
已为社区贡献30条内容
所有评论(0)