【vue】AntDV组件库中a-upload实现文件上传:

文章目录

        • 一、文档:
        • 二、使用(以Jeecg为例):
            • 【1】template:
            • 【2】script:
        • 三、效果图:


一、文档:

Upload 上传–Ant Design Vue

image.png

二、使用(以Jeecg为例):
【1】template:
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader":data="{ 'orderId': record.id }" :action="importExcelUrlDispatchCar"@change="handleImportExcel">导入
</a-upload>
【2】script:
<script>export default {data() {return {url:{importExcelUrlDispatchCar:"/kd/xxx/importTemplate"}}},computed: {//拼接上传的地址importExcelUrlDispatchCar: function () {return `${window._CONFIG['domianURL']}/${this.url.importExcelUrlDispatchCar}`;},// 设置上传的Header参数tokenHeader() {let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }let tenantid = Vue.ls.get(TENANT_ID)if (tenantid) {head['tenant-id'] = tenantid}return head;},},methods:{handleImportExcel(info){this.loading = true;if (info.file.status !==  'uploading') {console.log(info.file,  info.fileList);}if (info.file.status === 'done') {this.loading = false;if (info.file.response.success){if (info.file.response.code === 201) {let { message, result:{ msg, fileUrl, fileName } }= info.file.responselet href = window._CONFIG['domianURL'] + fileUrlthis.$warning({title: message,content: (<div><span>{msg}</span><span>具体详情请 <a href={href}target="_blank" download={fileName}>点击下载</a> </span></div>)})} else {this.$message.success(info.file.response.message ||`${info.file.name} 文件上传成功`)}this.loadData()} else {this.$message.error(`${info.file.name} ${info.file.response.message}.`);}}else if (info.file.status === 'error') {this.loading = false;if (info.file.response.status === 500) {let data = info.file.responseconst token = Vue.ls.get(ACCESS_TOKEN)if (token && data.message.includes("Token失效")) {this.$error({title: '登录已过期',content: '很抱歉,登录已过期,请重新登录',okText: '重新登录',mask: false,onOk: () => {store.dispatch('Logout').then(() => {Vue.ls.remove(ACCESS_TOKEN)window.location.reload();})}})}}}else{this.$message.error(`文件上传失败: ${info.file.msg} `);}},}}
</script>
三、效果图:

image.png
image.png
image.png

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity可视化Shader工具ASE介绍——10、ASE实现曲面细分

阿赵的Unity可视化Shader工具ASE介绍目录   大家好&#xff0c;我是阿赵。   之前介绍地面交互的时候&#xff0c;介绍了曲面细分着色器的使用。这个过程&#xff0c;在ASE里面也是可以实现的。关于曲面细分的具体作用&#xff0c;这里就不再重复&#xff0c;如果有兴趣了解…

Maven 插件统一修改聚合工程项目版本号

目录 引言直接修改 pom.xml 的版本号的问题Maven 插件修改版本号开源项目微服务商城项目前后端分离项目 引言 在Maven项目中&#xff0c;我们通常有两种常见的方式来修改版本号&#xff1a;直接在pom.xml文件中手动编辑和利用Maven插件进行版本号调整。 本文将比较这两种修改…

Istio学习笔记- 服务网格

Istio 服务网格 参考&#xff1a;Istio / Istio 服务网格 Istio 使用功能强大的 Envoy 服务代理扩展了 Kubernetes&#xff0c;以建立一个可编程的、可感知的应用程序网络。Istio 与 Kubernetes 和传统工作负载一起使用&#xff0c;为复杂的部署带来了标准的通用流量管理、遥…

[工业自动化-21]:西门子S7-15xxx编程 - 软件编程 - 如何快速看懂PLC梯形图?

目录 预备&#xff1a;电气图 1. 电路图 2. 电气图 一、梯形图概述 1.1 什么是梯形图 1.2 梯形图的作用 二、梯形图中的主要元素 三、梯形图的程序执行 3.1 梯形图扫描的原则 3.2 梯形图执行顺序 3.3 梯形图扫描 预备&#xff1a;电气图 1. 电路图 电路组成&#x…

​软考-高级-系统架构设计师教程(清华第2版)【第4章 信息安全技术基础知识(P160~189)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第4章 信息安全技术基础知识&#xff08;P160~189&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图

机器视觉系统中工业光源选型避坑指南

光源的作用&#xff1a; 照亮目标&#xff0c;提高目标亮度 形成有利于图像处理的效果&#xff0c;提升对比度 克服环境光干扰&#xff0c;保证图像的稳定性 光源的选型思路&#xff1a; ①颜色 ②外形  ③打光方式  ④亮度 选颜色 通过选择合适颜色的光源&#xff0c;…

WebSocket真实项目总结

websocket websocket是什么? websocket是一种网络通讯协议。 websocket 是HTML5开始提供的一种在单个TCP链接上进行全双工通讯的协议。 为什么需要websocket? 初次接触websocket&#xff0c;都会带着疑惑去学习&#xff0c;既然已经有了HTTP协议&#xff0c;为什么还需要另一…

Jenkins中强制停止停不下来的job

# Script console 执行脚本 Jenkins 的提供了 script console 的功能&#xff0c;允许你写一些脚本&#xff0c;来调度 Jenkins 执行一些任务。 我们就可以利用 script console 来强制停止 job 执行。 首先进入 Jenkins 的 script console 页面&#xff1a; script console 路…

C# datagridView 控件使用心得

首先本人的需求是&#xff0c;通过UI编辑一个表格文件&#xff0c;然后将其存储起来。 同时也可以对其进行载入,话不多说先上图片 dataGridView1 的初始化&#xff0c;这个控件的初始化可以使用UI界面的设置&#xff0c;也可以使用程序&#xff1a; Column1 new System.Window…

Python武器库开发-flask篇之flask框架的安装(二十一)

Flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架&#xff0c;对于Werkzeug本质是Socket服务端&#xff0c;其用于接收http请求并对请求进行预处理&#xff0c;然后触发Flask框架&#xff0c;开发人员基于Flask框架提供的功能对请求进…

LeetCode 1334. 阈值距离内邻居最少的城市:多次运用单源最短路的迪杰斯特拉算法

【LetMeFly】1334.阈值距离内邻居最少的城市&#xff1a;多次运用单源最短路的迪杰斯特拉算法 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-the-city-with-the-smallest-number-of-neighbors-at-a-threshold-distance/ 有 n 个城市&#xff0c;按从 0 到 n-1…

03 # 类型基础:动态类型与静态类型

通俗定义 静态类型语言&#xff1a;在编译阶段确定所有变量的类型 编译阶段确定属性偏移量用偏移量访问代替属性名访问偏移量信息共享 动态类型语言&#xff1a;在执行阶段确定所有变量的类型 在程序运行时&#xff0c;动态计算属性偏移量需要额外的空间存储属性名所有对象的…