Vue 图片上传组件（base64 版）：vue-upload-imgs

谭光志

发布于 2020-09-28 10:57:39

1.1K0

发布于 2020-09-28 10:57:39

文章被收录于专栏：编程技术分享

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

数据结构