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>