ant-design-vue组件的upload上传头像上传三次的问题(图片多次上传问题)

问题描述

使用upload组件时,发现上传方法会被调用3次,对于上传单张图片来说这似乎没什么问题;
但是使用fileList参数时,就会发现即使你只上传了一张图片,但是处理后的图片为三张重复图片,这样的话如何匹配对应上传动作为对应的图片数量是需要我们进行处理的。

问题分析

上传方法多次调用是由于图片的上传机制导致的。

文件上传状态有:uploading done error removed;

若是不给action参数,文件会走uploading done error 这三个状态,每个状态都进行一个上传动作,最后得到三张重复照片是必然的。
至于说指定done状态再处理上传后的图片是不可行的,原理不是很清楚,但是有了action,就能精准匹配done状态来处理图片数据。

至于说上传单张图片没问题是因为若是不使用fileList参数,upload组件就只接收一个地址。
在这里插入图片描述
在这里插入图片描述

解决方案

在使用组件的时候给action的属性值为上传地址,然后再change方法里面判断文件的上传状态为done再进行照片的转base64和上传动作

组件:<a-upload name="avatar" action="http://192.168.0.10:8080/xx/xx/xx" class="avatar-uploader" :show-upload-list="false"  @change="imageUpload6"><img v-if="imageUrl6" :src="imageUrl6" alt="avatar" /><div v-else><a-icon :type="'plus'" /></div></a-upload>方法:async imageUpload6({ file, fileList }) {if (file.status === 'done') {getBase64(fileList[fileList.length - 1].originFileObj).then((imageUrl) => {let data = {staffId: this.staffId,photoBase64: imageUrl,};changePhoto(data).then((res) => {if (res.data.code == rayframework_http_success_code) {this.imageUrl6 = res.data.result.sysStaffPhoto.showPhoto;}});});}},

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

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

相关文章

微服务井喷时代,我们如何规模化运维?

随着云原生技术发展及相关技术被越来越多运用到公司生产实践当中&#xff0c;有两种不可逆转的趋势&#xff1a; 1、微服务数量越来越多。原来巨型单体服务不断被拆解成一个个微服务&#xff0c;在方便功能复用及高效迭代的同时&#xff0c;也给运维带来了不少挑战&#xff1a;…

iOS系统下轻松构建自动化数据收集流程

在当今信息爆炸的时代&#xff0c;我们经常需要从各种渠道获取大量的数据。然而&#xff0c;手动收集这些数据不仅耗费时间和精力&#xff0c;还容易出错。幸运的是&#xff0c;在现代科技发展中有两个强大工具可以帮助我们解决这一问题——Python编程语言和iOS设备上预装的Sho…

MAC终端美化

先看看效果&#xff1a; 1.安装on-my-zsh 打开终端&#xff0c;输出&#xff1a; sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"安装过程中如果出现了链接超时的错误&#xff0c;不要慌&#xff0c;就再来一次&#x…

17 mysql global_variables session_variables

前言 这是一个关于 mysql 中的一些配置的探索 起因是需要 看一下 mysql 自增长的实现, 这里面涉及到两个变量 auto_increment_increment, auto_increment_offset, 然后 需要探索一下 这两个变量的来历 然后 就有了这里的相关介绍 global_variables 的初始化 global_va…

核货宝:收银系统后台一般是怎样的,有哪些功能

收银系统后台是一个重要的管理工具&#xff0c;它为企业提供了对收银机的全面控制和配置。收银系统后台是一个用于管理和配置收银机的软件界面。它通常由以下几个主要部分组成&#xff1a; 1. 登录和权限管理 收银系统后台需要一个安全的登录系统&#xff0c;以确保只有授权人…

群晖(Synology)NAS 后台安装 Docker 后配置 PostgreSQL

群晖&#xff08;Synology&#xff09;NAS 的后台在新版本对 Docker 不再称为 Docker&#xff0c;现在改称为 Container Manager 了。 单击进入后运行 Container Manager。 PostgreSQL 容器 针对 PostgreSQL 的容器&#xff0c;我们选择容器后&#xff0c;如果你已经安装了 P…

OpenCV 02(色彩空间)

一、OpenCV的色彩空间 1.1 RGB和BGR 最常见的色彩空间就是RGB, 人眼也是基于RGB的色彩空间去分辨颜色的. OpenCV默认使用的是BGR. BGR和RGB色彩空间的区别在于图片在色彩通道上的排列顺序不同. 显示图片的时候需要注意适配图片的色彩空间和显示环境的色彩空间.比如传入的图片…

(数字图像处理MATLAB+Python)第十二章图像编码-第三、四节:有损编码和JPEG

文章目录 一&#xff1a;有损编码&#xff08;1&#xff09;预测编码A&#xff1a;概述B&#xff1a;DM编码C&#xff1a;最优预测器 &#xff08;2&#xff09;变换编码A&#xff1a;概述B&#xff1a;实现变换编码的主要问题 二&#xff1a;JPEG 一&#xff1a;有损编码 &am…

1000元订金?华为折叠屏手机MateX5今日开始预订,售价尚未公布

华为最新款折叠屏手机Mate X5今日在华为商城开始预订&#xff0c;吸引了众多消费者的关注。预订时需交纳1000元的订金&#xff0c;而具体售价尚未公布。据华为商城配置表显示&#xff0c;Mate X5预计将搭载Mate 60系列同款麒麟9000S处理器&#xff0c;或可能搭载麒麟9100处理器…

Navicat连接openGauss数据库报错

错误信息&#xff1a;fe_sendauth:invalid authentication request from server:AUTH_REQ_SASL_CONT without AUTH_REQ_SASL 解决步骤&#xff1a; 1&#xff09;关闭防火墙&#xff1a; 切换root用户执行&#xff1a;su - root 输入密码 systemctl status firewalld 查…

YOLOV7改进-添加P2和P6检测层(以YOLOV7-Tiny为例)

下载三个配置文件地址 1、加p6 1、配置文件添加 2、让它自己利用k-means算法进行聚类 3、如果从8或9出来&#xff0c;在这里改 完整

Container容器

Container继承体系 Winow是可以独立存在的顶级窗口,默认使用BorderLayout管理其内部组件布局;Panel可以容纳其他组件&#xff0c;但不能独立存在&#xff0c;它必须内嵌其他容器中使用&#xff0c;默认使用FlowLayout管理其内部组件布局&#xff1b;ScrollPane 是 一个带滚动条…