antd-vue - - - - - upload组件的使用

news2024/12/22 23:35:57

upload组件的使用

参数说明:
file:list : 上传列表数据
name: 上传时的key
data: 上传时额外的参数
header: 上传列表数据
actions: 上传接口地址
before-upload: 上传之前的回掉
change: 传文件改变时

在这里插入图片描述

// 变量定义
      updateData: { billId: "", fileType: "" },
      uploadLoading: false, // 是否正在上传
      loading: false,
      readonly: true,
      headers: { Authorization: localStorage.getItem("token") },
      action: "https://a.abc.com/api/file/uploadFile", // 上传地址
      accept: `.png, .jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf`, // 拼接图片格式和需要支持的文件格式
      fileList: [],
  ...
  ...
  // 资源上传之前
    const beforeUpload = file => {
      const fileType = file.name.split(".")[1];
      console.log("fileType: 上传之前:", fileType);
    };
...
// 上传文件改变时的状态
    const handleChange = info => {
      uploadLoading = true;

      if (info.file.status !== "uploading") {
        // 正在上传
      }
      if (info.file.status === "done") {
        // 修改file-list
        let resFileList = [...info.fileList];
        resFileList = resFileList.map(file => {
          if (file.response && !!file.response.success) {
            const { fileName, fileUrl } = file.response.data;
            file.name = fileName;
            file.type = fileName.split(".")[1];
            file.path = fileUrl;
            delete file.response;
          }
          return file;
        });
        fileList = resFileList;
        message.success("上传成功");
        uploadLoading = false;
        updateData.fileType = ""; // 上传结束 清除文件类型
      } else if (info.file.status === "error") {
        message.error("上传失败");
        uploadLoading = false;
        updateData.fileType = ""; // 上传结束 清除文件类型
      }
    };


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

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

相关文章

Flutter 自定义Grade组件

/*** images 图片数组* titles title数组* length_w 一行的数量* length_h 行数*/static Widget getMenuGrade(List<String> images, List<String> titles, int length_w, int length_h) {int startIndex 0;List<Widget> rowList [];List<List<Widge…

docker-compose服务名称和容器名称区别

需求及结论 在docker-compose文件一般书写如下&#xff1a; version: 3.8 x-logging: &default-loggingoptions:max-size: "200m"max-file: "5"driver: json-file x-environment: &default-environmentTZ: Asia/ShanghaiLANG: C.UTF-8 services:…

前端什么最难学?

前言 个人认为是JS&#xff0c;无论是在平时的项目或者找工作时候JS都是大头&#xff0c;相比起其他的部分&#xff0c;它相对而言是难一点&#xff0c;同时也是十分重要的一部分&#xff0c;学好原生JS&#xff0c;后续的学习才能基于此循序渐进&#xff0c;下面是我总结的关…

(2023 最新版)大厂面试必问的1000道Java面试题附答案详解

很多 Java 工程师的技术不错&#xff0c;但是一面试就头疼&#xff0c;10 次面试 9 次都是被刷&#xff0c;过的那次还是去了家不知名的小公司。 问题就在于&#xff1a;面试有技巧&#xff0c;而你不会把自己的能力表达给面试官。 应届生&#xff1a;你该如何准备简历&#x…

报表生成器FastReport .Net用户指南:“SVG”对象

FastReport .Net是一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案&#xff0c;使用FastReport .NET可以创建独立于应用程序的.NET报表&#xff0c;同时FastReport .Net支持中文、英语等14种语言&#xff0c;可以让你的产品保证真正的国际性。 FastReport.NET官方版…

数据库|TiDB灾备切换实践-部署

刘昊 | 数据库工程师 最近手头有个系统&#xff0c;有需要搭建灾备库的需求&#xff08;RTO要求4小时内&#xff0c;根据实际情况计算&#xff09;。考虑到生产系统是5版本&#xff0c;TiCDC存在一些兼容性问题&#xff0c;且TiDB Binlog已经有实践案例及经验可供参考&#xf…

SpringCloud Eureka注册服务提供者(七)

这里我们在原来的服务提供者项目 microservice-student-provider-1001 上面直接修改&#xff1a; 首先pom.xml修改&#xff0c;加上eureka客户端依赖&#xff1a; <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>…

【MySQL高级篇笔记-数据库备份与恢复(下) 】

此笔记为尚硅谷MySQL高级篇部分内容 目录 一、物理备份与逻辑备份 二、mysqldump实现逻辑备份 1、 备份一个数据库 2、备份全部数据库 3、备份部分数据库 4、备份部分表 5、备份单表的部分数据 6、排除某些表的备份 7、只备份结构或只备份数据 8、备份中包含存储过…

2023开放原子全球开源峰会展区“云游图鉴”,带你畅游开源世界!

2023 开放原子 全球开源峰会 畅游回顾 2023 开放原子全球开源峰会&#xff0c;6 月 11 日-13 日在北京圆满举行&#xff01; 一大批开源人从四面八方奔来&#xff0c;共赴这场盛会&#xff0c;在开源技术新世界里畅快云游&#xff01; 科技骨干企业、开源高端项目&#xff0…

前端眼里的Docker概念、工作流和实践-前端开发者也需要掌握Docker:加速你的开发流程

如果现在有个厨王争霸赛&#xff0c;比赛的菜式是做一道&#x1f414;相关的菜式&#xff0c;选手们需要做不同的鸡&#xff0c;有需要公鸡和母鸡的&#xff0c;有需要鸡仔的&#xff0c;为了让选手们完美的进行比赛&#xff0c;主办方为每个选手准备了独立厨房&#xff0c;厨房…

代码随想录算法训练营第五十七天|647. 回文子串|516.最长回文子序列

LeetCode647. 回文子串 动态规划五部曲&#xff1a; 1&#xff0c;确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a;本题如果我们定义&#xff0c;dp[i] 为 下标i结尾的字符串有 dp[i]个回文串的话&#xff0c;会发现很难找到递归关系。dp[i] 和 dp[i-…

【备战秋招】每日一题:4月29日美团春招:题面+题目思路 + C++/python/js/Go/java带注释

2023大厂笔试模拟练习网站&#xff08;含题解&#xff09; www.codefun2000.com 最近我们一直在将收集到的各种大厂笔试的解题思路还原成题目并制作数据&#xff0c;挂载到我们的OJ上&#xff0c;供大家学习交流&#xff0c;体会笔试难度。现已录入200道互联网大厂模拟练习题&a…

好用的Windows数据恢复软件--傲梅恢复之星

​数据恢复软件有什么用&#xff1f; 现在&#xff0c;人们拥有大量的文件需要保留和保护&#xff0c;包括照片、视频、文档、游戏等等。了解数据安全的用户会利用云存储服务和外部设备来存储和备份重要的数据。 但更多的用户并不重视数据备份。这样做是相当危险的&#xf…

网络安全进阶学习第一课——认证崩溃之弱口令与暴力破解

文章目录 一、什么是弱口令&#xff1f;二、暴力破解1、暴力破解攻击产生原因2、暴力破解分类3、具体案例 一、什么是弱口令&#xff1f; 弱口令没有严格和准确的定义&#xff0c;通常认为它是容易被别人猜测到或被工具破解的口令均为弱口令。 在允许社会工程学攻击的情况下&…

一文搞懂 AB Testing 的分层分流

一、定义 在网络分析中&#xff0c;A / B测试&#xff08;桶测试或分流测试&#xff09;是一个随机实验&#xff0c;通常有两个辩题&#xff0c;A和B。利用控制变量法保持有单一变量的前提下&#xff0c;将A、B数据进行对比&#xff0c;得出实验结论。 二、简述 通常网站会利…

CentOS7配置教程(十三)安装Python3

由于 yum install python3 默认安装的 Python 版本较低&#xff0c;&#xff08;也可能自带了python3的版本过低&#xff09;现如今有更高版本的 Python 需求&#xff0c;就想用编译安装的方法安装一个较高版本的 Python&#xff0c;顺道记录一下安装过程。 注意&#xff1a;不…

通过ETLCloud自动化数据处理:用友U8数据一键同步

用友U8 用友U8是一款成熟的企业管理软件&#xff0c;是一套适用于企业全面管理的ERP&#xff08;Enterprise Resource Planning&#xff09;软件。主要用于管理企业的财务、人力资源、供应链、生产制造等业务。它具有模块化设计和高度可定制化的特点&#xff0c;可以根据企业的…

X Toolkit影像工具

最近发现一款3d影像工具&#xff0c;在网页版的表现很流畅&#xff0c;没有使用独显的情况下也非常的流畅。 X Toolkit 是一个开源工具包和框架&#xff0c;用于构建在浏览器中运行的医学和科学 3D 可视化&#xff0c;它使用 WebGL 的强大功能&#xff0c;只需几行代码即可提供…

探讨开源法律共识|2023开放原子全球开源峰会开源法律与合规分论坛成功举办

6 月 11 日&#xff0c;以“开源知识产权的深度现实与广阔未来”为主题的 2023 开放原子全球开源峰会“开源法律与合规分论坛”在北京经济开发区国家信创园顺利召开。全球开源领域法律与合规专家共同从理论和实践维度&#xff0c;就开放创新模式下知识产权纠纷的最新案例、开源…

ZooKeeper【客户端的API操作、写数据流程】

前置工作 创建Maven工程 导入依赖 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version></dependency><dependency><groupId>org.apache.loggi…