Skip to content

woai3c/vue-upload-imgs

Repository files navigation

Vue 图片上传组件(支持 Vue2、Vue3)

组件保存的是图片的 base64 码,如果有 BUG,请提 issues

在线 demo

使用

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://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/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://unpkg.com/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>

文档

字段 类型 描述 默认值 值类型 示例
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

About

vue 图片上传组件(base64 版)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published