Vue 圖片上傳組件（base64 版）：vue-upload-imgs

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>