vue-upload-imgs
v2.0.3
Published
Vue 图片上传组件(base64)
Downloads
131
Readme
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>