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，就介绍到这里。感兴趣的朋友不可错过，欢迎一起交流分享。