今天给小伙伴们推荐一款超好用的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: ';,  // file delete service url  deleteFileUrl: ';,  showMessage: (vue, message) => {    //using v-dialogs to show message    vue.$dlg.alert(message, {messageType: 'error'});  }};Vue.use(vUploader, uploaderConfig);

在页面/模块中使用

单图片上传模式

<template>  <div class="wrap-upload">    <v-uploader @done="uploadDone" ></v-uploader>  </div></template><script>  export default {    methods:{      // @type Array      uploadDone(files){        if(files && Array.isArray(files) && files.length){          console.log(files);        }      }    }  }</script>

<v-uploader button-text="Select file to upload" ></v-uploader>

<v-uploader :preview-width="400" :preview-height="300" ></v-uploader>

<v-uploader preview-img="assets/logo.png" ></v-uploader>

<v-uploader :multiple="true"></v-uploader>

参数配置

回调函数

操作简单，界面友好，特别适合一些后台上传模块。

最后附上示例及项目地址

# 文档地址 仓库地址

ok，就介绍到这里。感兴趣的朋友不可错过，欢迎一起交流分享。