elementui使用el-upload组件如何实现自定义上传
目录
- 使用el-upload组件实现自定义上传
- 方式一:选择后自动上传
- 方式二:选择后手动上传
- 使用el-upload上传文件夹
- 封装elementui el-upload文件上传组件
使用el-upload组件实现自定义上传
方式一:选择后自动上传
使用 http-request 覆盖默认的上传行为,可以自定义上传的实现
利用 before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise且被 reject,则停止上传
template 部分
部署流程定义
js 部分
beforeUpload (file) { // 上传文件之前钩子const type = file.name.split('.')[1]if (type !== 'bpmn') {this.$message({ type: 'error', message: '只支持bpmn文件格式!' })return false}},uploadBpmn (param) { // 部署流程定义(点击按钮,上传bpmn文件,上传成功后部署,然后重新加载列表)const formData = https://www.it610.com/article/new FormData()formData.append('processDefinition', param.file) // 传入bpmn文件this.$API({name: 'deploy',data: formData,headers: {'Content-Type': 'multipart/form-data'}}).then(res => {if (res.data.code == 0) {this.$message({ type: 'success', message: res.data.msg })} else {this.$message({ type: 'error', message: res.data.msg })}}).catch(error => {this.$message({ type: 'error', message: error })}).finally(() => {this.getList()})},
如果不想上传成功后显示上传文件列表,可以隐藏掉文件列表
可以在组件中设置 :show-file-list="false"
或者
::v-deep .el-upload-list {display: none !important; }
方式二:选择后手动上传
上传文件将文件拖到此处,或点击上传 确 定
使用el-upload上传文件夹
只需要为 input 输入框设置 webkitdirectory 属性
mounted() {if (this.$route.query.type === 'folder') {this.$nextTick(() => {document.querySelector('.el-upload__input').webkitdirectory = true})}},
封装elementui el-upload文件上传组件
// 自定义的全局组件my-componentlet _utils = new Utils()Vue.component('uploadfile', {props: {uploaddata: {type: Object}},template: `表名称:{{uploaddata.sheetname}} 选择文件 `,data() {return {}},methods: {/*上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。*/beforeUpload(file){const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1); const whiteList = ["xls", "xlsx"]; if (whiteList.indexOf(fileSuffix) === -1) {_utils.MessageError(this,"上传文件只能是xls、xlsx格式")return false; }const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) {_utils.MessageError(this,"上传文件大小不能超过5MB")return false; }},handleRemove(file, fileList) {},handleSuccess(response, file, fileList) {let {code, msg} = responseif (code == 0) {utils.MessageSuccess(this, "文件上传成功")} else {utils.MessageError(this, msg)}},/*点击文件列表中已上传的文件时的钩子*/handlePreview(file) {// console.log(file); },/*文件超出个数限制时的钩子*/handleExceed(files, fileList) {},/*删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除*/beforeRemove(file, fileList) {// return this.$confirm(`确定移除 ${file.name}?`); }}})
【elementui使用el-upload组件如何实现自定义上传】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- springboot|springboot log4j2日志框架整合与使用过程解析
- 如何在ElementUI的上传组件el-upload中设置header
- Java高并发|Java多线程之常用并发容器的使用
- java|01.JAVA并发编程-线程的使用-基本概念
- Vue中的nextTick作用和几个简单的使用场景
- vue|超级详细的Vue-cli3使用教程
- nginx+ffmpeg|视频直播(使用ffmpeg推送到nginx-rtmp实现rtsp转换rtmp)
- go mod 封装公司私有包,并导入使用
- 干货分享|使用 Istio 实现灰度发布
- Apache Hudi使用简介