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

vue-upload-imgs 上傳組件保存的是圖片的 base64 碼，這是項目地址，歡迎關注。

在線 demo

• 預覽模式
• 列表模式
• 禁用

文檔

字段	類型	描述	默認值	值類型
type	屬性值	組件顯示模式 0.圖片預覽 1.圖片列表 2.帶有上傳按鈕的圖片預覽	0	Number
disabled	屬性值	禁用組件	false	Boolean
access	屬性值	組件容許上傳的圖片類型	'image/png,image/jpeg'	String
files	屬性值	組件圖片數據	[]	Array
label	屬性值	上傳按鈕	'點擊上傳'	String
limit	屬性值	限制上傳的圖片數量，0 爲不限制	1	Number
multiple	屬性值	是否容許多選	false	Boolean
compress	屬性值	是否開啓壓縮	false	Boolean
quality	屬性值	壓縮質量	0.8	Number
beforeUpload	函數	上傳前回調函數	null	Function
change	事件	圖片改變時觸發	null	Function
remove	事件	圖片移除時觸發	null	Function
exceed	事件	圖片超出限制個數時觸發	null	Function
preview	事件	點擊圖片上的 + 號觸發預覽事件	null	Function

使用

在單文件組件中引用

npm i vue-upload-imgs

import Vue from 'vue'
import VueUploadImgs from 'vue-upload-imgs'

Vue.use(VueUploadImgs)

<template>
    <div>
        <VueUploadImgs 
            multiple
            compress
            :files="files"
            :before-upload="beforeUpload"
            :limit="limit"
            :type="type"
            @change="change"
            @remove="remove"
            @preview="preview"
            @exceed="exceed"
        >
        </VueUploadImgs>
    </div>
</template>

在HTML文件中直接引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../dist/vue-upload-imgs.js"></script>

<div id="app">
    <vue-upload-imgs 
        multiple
        compress
        :files="files"
        :before-upload="beforeUpload"
        :limit="limit"
        :type="type"
        @change="change"
        @remove="remove"
        @preview="preview"
        @exceed="exceed"
    >
    </vue-upload-imgs>
</div>