Vue Antdv 上传组件（a-upload、a-upload-dragger）二次封装（DZMAntdvUpload）

在使用 Antdv 上传组件 a-upload、a-upload-dragger 的时候，尤其是允许 选择多文件上传 的时候，可能需要检测 文件重复、文件大小、图片尺寸、图片比例、视频尺寸、视频比例、错误不需要重复提示、批量文件一个不符合都不要进行上传 等常用功能
扩展功能支持列表，打开之后，稍微往中间滚一滚。
这里将这些功能都封装到了一起，在完全支持原生自带属性的同时，并扩展支持更多常用便利功能，方便开发中节省时间。
DZMAntdvUpload 使用，源码注释多，使用简单，扩展性高。

上传组件 UI、样式 支持 slot 全部重写自定义。

<template><div class="home-view"><!-- 上传组件 --><upload :customRequestPro="customRequestPro" :beforeUploadPro="beforeUploadPro"></upload><!-- 启用拖拽上传组件 --><upload :isDragger="true" :customRequestPro="customRequestPro" :beforeUploadPro="beforeUploadPro"></upload><!-- 上传组件 --><!-- <upload :customRequestPro="customRequestPro"><span slot="up-title">三水上传</span></upload> --><!-- 上传组件 - 自定义 --><!-- <upload :customRequestPro="customRequestPro" :disabled="true"> --><!-- 自定义上传UI --><!-- <template slot="up-slot" slot-scope="props"> --><!-- 使用内部禁用属性 --><!-- <a-button :disabled="props.disabled">三水上传Pro</a-button> --><!-- 不使用内部禁用属性 --><!-- <a-button>三水上传Pro</a-button></template></upload> --></div>
</template><script>
// 导入组件
import Upload from '@/components/Upload'
export default {components: {Upload},methods: {// 准备上传beforeUploadPro () {// return truereturn new Promise((resolve, reject) => {resolve()})},customRequestPro (data, fileJson, result) {// 上传完成setTimeout(() => {result(true)}, 2000)}}
}
</script><style scoped>
.home-view {display: flex;align-items: center;justify-content: center;
}
</style>

Vue Antdv 上传组件（a-upload、a-upload-dragger）二次封装（DZMAntdvUpload）相关推荐

vue 文件上传组件封装
增加图片缩略图以及Word.txt文档在线预览文件上传组件完整代码 <template><div><el-uploadclass="upload-demo&q ...
vue 视频上传组件
组件: <template><div class="upload-box"><div class="avatar-uploader-box& ...
vue el-upload上传组件限制文件类型：accept属性
el-upload 控件文档 https://element.eleme.cn/#/zh-CN/component/upload accept属性示例 <el-uploadclass=&quo ...
Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
Vue：利用Plupload插件封装文件上传组件
接上回<Plupload插件>,已经尝试将Plupload插件引入到HTML页面中,并进行参数配置,然后联合后端接口进行调试,完成了文件上传的工作.但是在Vue项目的开发中,我们更想将它封 ...
vue-simple-uploader上传组件
一个由simple-uploader.js提供支持的 Vue.js 上传组件 vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件.它的优点包括且不 ...
前端学习（2011）vue之电商管理系统电商系统之初步使用upload上传组件
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Vue菜鸟之路: 封装上传组件
为什么80%的码农都做不了架构师?>>> 前言 vue的菜鸟学习之路,从封装一个简单的上传组件开始,菜鸟摸索,大佬轻喷..(不服可以来写Java ....当我没说) 设计 1. ...
vue.js上传头像插件_一个基于vue2.0的头像上传组件
vue-avatar 基于vuejs2.0 + webpack环境使用的上传组件支持服务器的域名和接口单独设置支持自定义提交字段支持自定义xhr 提交的header字段/表单name/限定上传格 ...

Vue Antdv 上传组件（a-upload、a-upload-dragger）二次封装（DZMAntdvUpload）

Vue Antdv 上传组件（a-upload、a-upload-dragger）二次封装（DZMAntdvUpload）相关推荐

最新文章

热门文章