当前位置: 首页 > Web前端 > JavaScript

Vue图片上传组件

时间:2023-03-26 23:58:09 JavaScript

vue-img-uploader是一个基于vue的图片上传组件,分为图片预览区、图片选择器、提交按钮三部分。可以去掉提交功能,用户获取图片列表后提交。效果图展示效果图请点此链接项目地址https://github.com/6fa/vue-im...文档字段类型说明默认值值类型previewComp属性选择图片预览的形式,有列表形式(listPreview)和卡片格式(cardPreview)'cardPreview'StringselectComp属性选择图片选择器的形式,有拖板格式(dragSelector)和卡片格式(cardSelector)'cardSelector'Stringlimit属性最大图片上传数量NumbermaxSize属性最大图片上传size,单位为MBnumbersubmit属性是否显示提交功能,不需要则不写。该值为提交的服务器地址。图片上传成功时触发StringuploadSuccess事件(带submit属性),参数为响应结果。图片上传失败时触发FunctionuploadFail事件(带submit属性),参数为错误信息。当图像超过大小限制时,将触发Functionoversize事件。(在有maxSize属性的前提下),参数为超过限制的图片在图片列表中的索引。FunctionreadError事件在图片读取过程中发生错误时触发。参数为错误图片在图片列表中的索引。函数使用示例卡片预览+卡片选择器+提交按钮:uploadFail='handler'@oversize='handler'@readError='handler'>如果不需要提交功能://通过fileList属性获取用户选择的图片列表this.$refs.uploader.fileList