vue-upload-imgsvue 圖片上傳組件

vue-upload-imgs 上傳組件保存的是圖片的 base64 碼。

在線 demo

• 預(yù)覽模式
• 列表模式
• 禁用

文檔

使用

在單文件組件中引用

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>