anguarjs 上傳圖檔預覽_輕量級 Vue 圖檔上傳元件V-Uploader

今天給小夥伴們推薦一款超好用的Vue圖檔上傳元件VUploader。

v-uploader 基于vue2.x建構的簡單易上手的圖檔上傳元件。支援單張、多張圖檔、縮略圖預覽及拖拽上傳功能。

安裝

$ npm i v-uploader -S
           

引入插件

import Vue from 'vue'import vUploader from 'v-uploader';const uploaderConfig = {  // file uploader service url  uploadFileUrl: 'http://xxx/upload/publicFileUpload',  // file delete service url  deleteFileUrl: 'http://xxx/upload/deleteUploadFile',  showMessage: (vue, message) => {    //using v-dialogs to show message    vue.$dlg.alert(message, {messageType: 'error'});  }};Vue.use(vUploader, uploaderConfig);
           

在頁面/子產品中使用

• 單圖檔上傳模式

• 自定義按鈕文本

• 自定義圖檔預覽區尺寸

• 自定義圖檔預覽區預設圖檔

• 圖檔批量上傳模式

參數配置

回調函數

操作簡單，界面友好，特别适合一些背景上傳子產品。

最後附上示例及項目位址

# 文檔位址https://terryz.gitee.io/vue/#/upload# 倉庫位址https://github.com/terryz/v-uploader
           

ok，就介紹到這裡。感興趣的朋友不可錯過，歡迎一起交流分享。