vue-upload-imgs 上传组件保存的是图片的 base64 码，这是项目地址，欢迎关注。
在线 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 |
使用
在单文件组件中引用
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="../dist/vueUploadImgs.umd.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>
