Vue 图片上传组件（支持 Vue2、Vue3）
组件保存的是图片的 base64 码，如果有 BUG，请提 issues
在线 demo
文档
| 字段 |
类型 |
描述 |
默认值 |
值类型 |
示例 |
| type |
属性值 |
组件显示模式 0.图片预览 1.图片列表 2.带有上传按钮的图片预览 |
0 |
Number |
|
| disabled |
属性值 |
禁用组件 |
false |
Boolean |
|
| access |
属性值 |
组件允许上传的图片类型 |
image/* |
String |
|
| files |
属性值 |
组件图片数据 |
[] |
Array |
v-model="files" files:[{ url: 'xxx', name: 'xxx.jpg'}] |
| label |
属性值 |
上传按钮 |
'点击上传' |
String |
|
| limit |
属性值 |
限制上传的图片数量，0 为不限制 |
0 |
Number |
|
| max-size |
属性值 |
允许上传图片的最大尺寸，单位字节 |
null |
Number |
|
| multiple |
属性值 |
是否允许多选 |
false |
Boolean |
|
| compress |
属性值 |
是否开启压缩 |
false |
Boolean |
|
| quality |
属性值 |
压缩质量 |
0.8 |
Number |
|
| before-read |
属性值 |
读取文件前的钩子函数 |
null |
Function，返回值为 true 则继续读取图片，为 false 则不进行任何操作 |
|
| after-read |
属性值 |
读取文件后的钩子函数 |
null |
Function，参数为读取后的图片 |
|
| before-remove |
属性值 |
移除文件前的钩子函数 |
null |
Function，参数为要预览的图片索引值 index 和图片 file，返回值为 true 则删除图片，为 false 则不进行任何操作 |
|
| oversize |
事件 |
图片大小超过 max-size 时触发 |
null |
Function，参数为超过尺寸大小的图片 |
|
| exceed |
事件 |
图片超出限制个数时触发 |
null |
Function |
|
| preview |
事件 |
点击图片上的 + 号触发预览事件 |
null |
Function，参数为要预览的图片索引值 index 和图片 file |
|
使用
Vue2
在单文件组件中引用
npm i vue-upload-imgs
import Vue from 'vue'
import VueUploadImgs from 'vue-upload-imgs'
Vue.use(VueUploadImgs)
<template>
<div>
<VueUploadImgs
multiple
compress
:before-read="beforeRead"
:after-read="afterRead"
:before-remove="beforeRemove"
:limit="limit"
:type="type"
@preview="preview"
@exceed="exceed"
@oversize="oversize"
v-model="files"
>
</VueUploadImgs>
</div>
</template>
在HTML文件中直接引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue-upload-imgs/dist/VueUploadImgs.iife.js"></script>
<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue-upload-imgs/dist/VueUploadImgs.iife.min.js"></script>
<div id="app">
<vue-upload-imgs
multiple
compress
:before-read="beforeRead"
:after-read="afterRead"
:before-remove="beforeRemove"
:limit="limit"
:type="type"
@preview="preview"
@exceed="exceed"
@oversize="oversize"
v-model="files"
>
</vue-upload-imgs>
</div>
Vue3
在单文件组件中引用
npm i vue-upload-imgs
import { createApp } from 'vue'
import VueUploadImgs from 'vue-upload-imgs/dist/vue3/VueUploadImgs.esm'
import App from './App.vue'
createApp(App)
.component('VueUploadImgs', VueUploadImgs)
.mount('#app')
<template>
<div>
<VueUploadImgs
multiple
compress
:before-read="beforeRead"
:after-read="afterRead"
:before-remove="beforeRemove"
:limit="limit"
:type="type"
@preview="preview"
@exceed="exceed"
@oversize="oversize"
v-model="files"
>
</VueUploadImgs>
</div>
</template>
在HTML文件中直接引用
<script src="https://unpkg.com/vue@next"></script>
<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue-upload-imgs/dist/vue3/VueUploadImgs.iife.js"></script>
<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue-upload-imgs/dist/vue3/VueUploadImgs.iife.min.js"></script>
<div id="app">
<vue-upload-imgs
multiple
compress
:before-read="beforeRead"
:after-read="afterRead"
:before-remove="beforeRemove"
:limit="limit"
:type="type"
@preview="preview"
@exceed="exceed"
@oversize="oversize"
v-model="files"
>
</vue-upload-imgs>
</div>
<script>
const app = Vue.createApp({
components: {
VueUploadImgs: VueUploadImgs.default,
},
// ...
})
app.mount('#app')
</script>