共计 1037 个字符，预计需要花费 3 分钟才能阅读完成。
vue-img-uploader
一个基于 vue 的图片上传组件，分为图片预览区、图片选择器、提交按钮三局部。其中提交性能可去除，在获取图片列表后由用户自行提交。
效果图展现
效果图请戳此链接
我的项目地址
https://github.com/6fa/vue-im…
文档
| 字段 | 类型 | 形容 | 默认值 | 值类型 |
|---|---|---|---|---|
| previewComp | 属性 | 抉择图片预览的模式，有列表模式 (listPreview) 和卡片模式(cardPreview) | ‘cardPreview’ | String |
| selectComp | 属性 | 抉择图片选择器的模式，有拖拽板模式 (dragSelector) 和卡片模式(cardSelector) | ‘cardSelector’ | String |
| limit | 属性 | 图片上传最大张数 | Number | |
| maxSize | 属性 | 图片上传最大大小, 单位为 MB | Number | |
| submit | 属性 | 是否显示提交性能，不须要则不写。值为提交的服务器地址。 | String | |
| uploadSuccess | 事件 | 图片上传胜利时触发（在有 submit 属性的前提下），参数为响应后果 | Function | |
| uploadFail | 事件 | 图片上传失败时触发（在有 submit 属性的前提下），参数为错误信息 | Function | |
| oversize | 事件 | 图片超出大小限度时触发（在有 maxSize 属性的前提下），参数为超出限度图片在图片列表中的索引 | Function | |
| readError | 事件 | 图片读取过程产生谬误时触发，参数为谬误图片在图片列表中的索引 | Function |
应用示例
卡片预览 + 卡片选择器 + 提交按钮：
<uploader
previewComp='cardPreview'
selectComp='cardSelector'
:limit='4'
:submit='url'
:maxSize="2"
@uploadSuccess='handler'
@uploadFail='handler'
@oversize='handler'
@readError='handler'>
</uploader>如果不须要提交性能：
<uploader
ref='uploader'
previewComp='cardPreview'
selectComp='cardSelector'
:limit='4'
:maxSize="2"
@oversize='handler'
@readError='handler'>
</uploader>// 通过 fileList 属性获得用户抉择的图片列表
this.$refs.uploader.fileList
正文完
发表至： javascript
2021-12-07
