vue vxeui 上传组件 vxe-upload 全局配置上传方法,显示上传进度,最完美的配置方案

news2024/11/6 13:43:13

Vxe UI 上传组件 vxe-upload 全局配置上传方法,显示上传进度,最完美的配置方案

正常使用上传组件 vxe-upload,都是在用的时候传自定义上传方法,然后进行处理。几个页面是没什么问题,当系统页面非常多的时候,就不好维护了,每个地方都写接口。由于系统是统一的上传附件接口,这时就可以利用全局参数实现统一管理上传逻辑。
这样配置完之后在 vxe-table 或者 vxe-from 中使用就会变得极致简单了,完美配置。

全局默认参数

// main.js
import { VxeUI } from 'vxe-pc-ui'
import axios from 'axios'

VxeUI.setConfig({
	upload: {
		// 封装统一的上传逻辑
		uploadMethod ({ file, updateProgress }) {
		  const formData = new FormData()
		  formData.append('file', file)
		  return axios.post('/api/pub/upload/single', formData, {
		    onUploadProgress (progressEvent) {
		      const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))
		      // 更新进度
		      updateProgress(percentCompleted)
		    }
		  }).then((res) => {
		    // { url: '' }
		    return {
		      ...res.data
		    }
		  })
		},
		// 封装统一的删除逻辑
		// removeMethod ({ option }) {},
		// 封装统一的下载逻辑
		// downloadMethod ({ option }) {},
		// 封装统一的预览逻辑
		// previewMethod ({ option }) {}
	}
})

表单使用

在这里插入图片描述

<template>
  <div>
    <vxe-form v-bind="formOptions" >
      <template #name="{ data }">
        <vxe-input v-model="data.name"></vxe-input>
      </template>

      <template #fileList1="{ data }">
        <vxe-upload v-model="data.fileList1"></vxe-upload>
      </template>

      <template #fileList2="{ data }">
        <vxe-upload v-model="data.fileList2" multiple></vxe-upload>
      </template>

      <template #imgList1="{ data }">
        <vxe-upload v-model="data.imgList1" mode="image"></vxe-upload>
      </template>

      <template #imgList2="{ data }">
        <vxe-upload v-model="data.imgList2" mode="image" multiple></vxe-upload>
      </template>

      <template #action>
        <vxe-button type="reset">重置</vxe-button>
        <vxe-button type="submit" status="primary">提交</vxe-button>
      </template>
    </vxe-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const formOptions = reactive({
  titleWidth: 120,
  data: {
    name: 'test1',
    nickname: 'Testing',
    sex: '',
    fileList1: [],
    fileList2: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
    ],
    imgList1: [],
    imgList2: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
    ]
  },
  items: [
    { field: 'name', title: '名称', span: 24, itemRender: {}, slots: { default: 'name' } },
    { field: 'fileList1', title: '上传附件', span: 24, itemRender: {}, slots: { default: 'fileList1' } },
    { field: 'fileList2', title: '上传附件多选', span: 24, itemRender: {}, slots: { default: 'fileList2' } },
    { field: 'imgList1', title: '上传图片', span: 24, itemRender: {}, slots: { default: 'imgList1' } },
    { field: 'imgList2', title: '上传图片多选', span: 24, itemRender: {}, slots: { default: 'imgList2' } },
    { align: 'center', span: 24, slots: { default: 'action' } }
  ]
})
</script>

表格使用

<template>
  <div>
    <vxe-table
      border
      show-overflow
      :data="tableData">
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="Name" min-width="180"></vxe-column>
      <vxe-column field="fileList1" title="附件列表" width="240">
        <template #default="{ row }">
          <vxe-upload v-model="row.fileList1" progress-text="{percent}%" :more-config="{maxCount: 1, layout: 'horizontal'}" readonly></vxe-upload>
        </template>
      </vxe-column>
      <vxe-column field="fileList2" title="上传附件" width="300">
        <template #default="{ row }">
          <vxe-upload v-model="row.fileList2" progress-text="{percent}%" :more-config="{maxCount: 1, layout: 'horizontal'}" :show-button-text="false" multiple></vxe-upload>
        </template>
      </vxe-column>
      <vxe-column field="imgList1" title="图片列表" width="160">
        <template #default="{ row }">
          <vxe-upload v-model="row.imgList1" mode="image" progress-text="{percent}%" :more-config="{maxCount: 1}" :image-style="{width: 40, height: 40}" :show-button-text="false" readonly></vxe-upload>
        </template>
      </vxe-column>
      <vxe-column field="imgList2" title="上传图片" width="210">
        <template #default="{ row }">
          <vxe-upload v-model="row.imgList2" mode="image" progress-text="{percent}%" :more-config="{maxCount: 1}" :image-style="{width: 40,height: 40}" :show-button-text="false" multiple></vxe-upload>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([
  {
    id: 10001,
    name: 'Test1',
    imgList1: [],
    imgList2: [],
    fileList1: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
    ],
    fileList2: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
    ]
  },
  {
    id: 10002,
    name: 'Test2',
    imgList1: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
      { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
    ],
    imgList2: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
      { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
    ],
    fileList1: [],
    fileList2: []
  },
  {
    id: 10003,
    name: 'Test3',
    imgList1: [
      { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
    ],
    imgList2: [
      { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
    ],
    fileList1: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
      { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
      { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
    ],
    fileList2: [
      { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
      { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
      { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
    ]
  }
])
</script>

以上全局配置完,使用就无需再重复写上传方法了。

https://github.com/x-extends/vxe-pc-ui
https://gitee.com/x-extends/vxe-pc-ui

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229223.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot 修复 Spring Framework 特定条件下目录遍历漏洞(CVE-2024-38819)

刚解决Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;没几天&#xff0c;又来一个新的&#xff0c;真是哭笑不得啊。 springboot 修复 Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;https://blog.csdn.ne…

SSH登录介绍

说明&#xff1a;一般登录服务器&#xff0c;我们可以用远程连接工具&#xff0c;如XShell、Windterm等&#xff0c;或者通过公司搭建的JumpServer&#xff08;跳板机、堡垒机&#xff09;来连接。前者是点对点登录&#xff0c;输入主机、端口&#xff0c;通过SSH协议登录&…

Unity计算二维向量夹角余弦值和正弦值的优化方法参考

如果不考虑优化问题&#xff0c;计算两个向量的余弦值或者正弦值可以直接使用类似的方法&#xff1a; [SerializeField] Vector2 v1, v2;void Start() {float valCos Mathf.Acos(Vector2.SignedAngle(v1, v2));float valSin Mathf.Asin(Vector2.SignedAngle(v1, v2)); } 但是…

理解 CSS 中的绝对定位与 Flex 布局混用

理解 CSS 中的绝对定位与 Flex 布局混用 在现代网页设计中&#xff0c;CSS 布局技术如 flex 和绝对定位被广泛使用。然而&#xff0c;这两者结合使用时&#xff0c;可能会导致一些意想不到的布局问题。本文将探讨如何正确使用绝对定位元素&#xff0c;避免它们受到 flex 布局的…

JAVA力扣每日一题:P3216. 交换后字典序最小的字符串

本题来自&#xff1a;力扣-每日一题 力扣 (LeetCode) 全球极客挚爱的技术成长平台https://leetcode.cn/ 题解&#xff1a; class Solution {public String getSmallestString(String s) {int len s.length();int[] arr new int[len];for (int i 0; i < len; i) {arr[i…

Vue3 学习笔记(十二)侦听器详解

在 Vue 3 中&#xff0c;侦听器是一种响应式特性&#xff0c;允许你观察和响应 Vue 实例上的数据变动。Vue 提供了 watch 和 watchEffect 两个函数来创建侦听器。 1、watch 侦听器 watch 是一个用于侦听特定数据源变化的函数。它允许你指定一个或多个数据源&#xff0c;并在这些…

#渗透测试#SRC漏洞挖掘# 信息收集-常见端口及谷歌语法

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

SAP ABAP开发学习——第一代增强(包含增强演示)

​​​​​​SAP ABAP开发学习——第二代增强&#xff08;包含增强演示&#xff09;-CSDN博客 SAP ABAP开发学习——第三代增强&#xff08;BADI)-CSDN博客 概念 第一代增强(增强嵌入标准程序中) 第一代出口-User exit 以SD用户出口为例 SD及MM较多的程序都是基于源码控制来…

安宝特分享 | AR技术引领:跨国工业远程协作创新模式

在当今高度互联的工业环境中&#xff0c;跨国合作与沟通变得日益重要。然而&#xff0c;语言障碍常常成为高效协作的绊脚石。安宝特AR眼镜凭借其强大的多语言自动翻译和播报功能&#xff0c;正在改变这一局面&#xff0c;让远程协作变得更加顺畅。 01 多语言翻译优势 安宝特A…

动态规划 01背包(算法)

现有四个物品&#xff0c;小偷的背包容量为8&#xff0c;怎么可以偷得价值较多的物品 如: 物品编号&#xff1a; 1 2 3 4 物品容量&#xff1a; 2 3 4 5 物品价值&#xff1a; 3 4 5 8 记f(k,w) ,当背包容量为w,可以偷k件物品…

AWD挨打记录

前言 昨天参加了星盟的AWD集训&#xff0c;本来寻思能猛猛乱杀&#xff0c;结果加固时间只有20分钟&#xff0c;WAF还没push上去就被三家上了不死马QAQ cms是站帮主&#xff0c;之前没打过&#xff0c;D盾啥也没扫出来&#xff0c;还寻思是个贼安全的系统&#xff0c;结果洞满…

InstructIR: High-Quality Image Restoration Following Human Instructions 论文阅读笔记

这是Radu大佬所在的Wrzburg大学的computer vision lab实验室发表在ECCV2024上的一篇论文&#xff0c;代码开源。文章提出了一种文本引导的All-in-One的restoration模型&#xff0c;如下图所示&#xff1a; 这个工作其实跟"InstructPix2Pix: Learning to Follow Image Edit…

libavdevice.so.58: cannot open shared object file: No such file ordirectory踩坑

博主是将大图切分成小图时遇到 问题一、linux编译后&#xff0c;找不到ffmpeg中的一个文件 产生原因&#xff0c;各种包集成&#xff0c;然后安装以后乱七八糟&#xff0c;甚至官方的教程也不规范导致没有添加路径到系统文件导致系统执行的时候找不到 1.下载 博主进行的离线…

【SQL实验】表的更新和简单查询

完整代码在文章末尾 在上次实验创建的educ数据库基础上&#xff0c;用SQL语句为student表、course表和sc表中添加以下记录 【SQL实验】数据库、表、模式的SQL语句操作_创建一个名为educ数据库,要求如下: (下面三个表中属性的数据类型需要自己设计合适-CSDN博客在这篇博文中已经…

UHF机械高频头的知识和待学习的疑问

电路图如上所示&#xff1a; 实物开盖清晰图如下&#xff1a; 待学习和弄懂的知识&#xff1a; 这是一个四腔的短路线谐振。分别是输入调谐&#xff0c;放大调谐&#xff0c;变频调谐和本振 第一个原理图输入为75欧&#xff08;应该是面向有同轴线的天线了&#xff09;如下图…

学习路之TP6--workman安装

一、安装 首先通过 composer 安装 composer require topthink/think-worker 报错&#xff1a; 分析&#xff1a;最新版本需要TP8&#xff0c;或装低版本的 composer require topthink/think-worker:^3.*安装后&#xff0c; 增加目录 vendor\workerman vendor\topthink\think-w…

【三十八】【QT开发应用】vlcplayer视频播放器(一)实现视频播放,视频暂停,视频停止,进度条调节,音量调节,时长显示功能

效果展示 vlcplayer_test视频播放器 MainWidget.ui 注意控件的布局和命名&#xff0c;控件的命名和信号与槽函数的绑定有关&#xff0c;所以这点很重要。 下载VLC组件和环境配置 videolan下载地址我下载的是vlc-3.0.8-win64版本. 将下载的文件复制粘贴到项目文件中. 复制粘…

5G NR NARFCN计算SSB中心频率MATLAB实现

本期给大家带来5G NR中已知绝对射频信道号NARFCN如何计算SSB的中心频率&#xff0c;用MATLAB实现&#xff0c;参考3GPP 38.104 下图是NARFCN与SSB中心频率换算关系&#xff0c;其中NREF就是NARFCN。 函数输出频率的单位是MHZ&#xff0c;输入是NARFCN。 有不清楚的地方欢迎来…

auto 项目笔记

基础设置 1.设置python目录为根路径 1. merge_with_history debug (1) coomon.yaml 修改 最下边的 root: /mnt/sdb/daimler/EHPV2/Ruiming_InternalDaily (2) 环境变量设置为1时 不走此步骤做的任何处理&#xff0c;直把上步数据接透传出去 2.

深度学习(九):推荐系统的新引擎(9/10)

一、深度学习与推荐系统的融合 深度学习在推荐系统中的融合并非偶然。随着互联网的飞速发展&#xff0c;数据量呈爆炸式增长&#xff0c;传统推荐系统面临着诸多挑战。例如&#xff0c;在处理大规模、高维度的数据时&#xff0c;传统方法往往显得力不从心。而深度学习以其强大的…