vue3中antd上传图片组件及回显

实现效果:

调用后端接口后,后端返回的数据:

1.在项目components/base下新建UploadNew.vue文件(上传图片公共组件)

<template><div class="clearfix"><a-uploadv-model:file-list="fileList"action="/platform-gateway/platform-file/security/chain"list-type="picture-card":headers="headers"@preview="handlePreview"@change="handleChange" ><div v-if="fileList.length < props.limit"><plus-outlined /><div style="margin-top: 8px">上传</div></div></a-upload><a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal></div>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import { HttpClientUtils } from '../../configure/http/httpClientUtils'interface Props {accept: string, // 上传文件的格式,limit: number,//上传图片数量fileListJson :UploadProps['fileList']
}
const props = defineProps<Props>()
function getBase64(file: File) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});
}const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
//调用后端接口请求头
const headers = {authorization: HttpClientUtils.getToken(),platform: 'WEB',serviceCode: 'athletics-service'
}
const $emit = defineEmits(["uploadDone"]) 
const fileList = ref<UploadProps['fileList']>([]);
if (props.fileListJson) {fileList.value = props.fileListJson
}
const handleCancel = () => {previewVisible.value = false;previewTitle.value = '';
};const handlePreview = async (file: UploadProps['fileList'][number]) => {if (!file.url && !file.preview) {file.preview = (await getBase64(file.originFileObj)) as string;}previewImage.value = file.url || file.preview;previewVisible.value = true;previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};const handleChange = (info: UploadChangeParam) => {if (info.file.status === 'done') {//   imageId.value = 'http://192.168.5.13/platform-gateway/platform-file/security/chain?fileName=' + info.file.response.data[0] + '&serviceCode=athletics-service'$emit("uploadDone", info.fileList)}
};
</script><style scoped>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {font-size: 32px;color: #999;
}.ant-upload-select-picture-card .ant-upload-text {margin-top: 8px;color: #666;
}
</style>

2.页面中使用

先引入:import AntdUploadFile  from "@/components/base/UploadNew.vue";

定义:

const props = defineProps({

  data: {} as any,

})//点编辑时父组件传入的回显数据

const fileListJson = ref<UploadProps['fileList']>([]);//封面

const fileListJson1 = ref<UploadProps['fileList']>([]);//轮播图

const formData = reactive({venue: {headerUrl:props.data?.headerUrl,bannerUrl:props.data?.bannerUrl,},
})

2.1 表单样式、使用组件

  <a-form-item :name="['venue', 'headerUrl']" label="封面图" :rules="[{ required: true }]"><AntdUploadFile:fileListJson="fileListJson":limit="1" accept="" type="frontIdcard" @upload-load="onUploading"@upload-done="onUploadDone" ></AntdUploadFile></a-form-item><a-form-item :name="['venue', 'bannerUrl']" label="场馆轮播" :rules="[{ required: true }]"><AntdUploadFile:limit="4" accept="" :fileListJson="fileListJson1"type="frontIdcard1" @upload-load="onUploading1"@upload-done="onUploadDone1" ></AntdUploadFile></a-form-item>

2.2 上传图片成功 ,点保存后传给后端

// 封面图片上传成功(单个图)
const onUploadDone = (fileList: any) => {// 文件上传成功后返回的文件信息 type,是为了一个页面引用多少文件上传作的区分if (fileList.length) {formData.venue.headerUrl= fileList[0].response.data}console.log( formData.venue.headerUrl,"上传成功后的参数 ", fileList);
}
// 轮播图片上传成功(多张图)
const onUploadDone1 = (fileList: any) => {// 文件上传成功后返回的文件信息 type,是为了一个页面引用多少文件上传作的区分let bannerUrl = []if (fileList.length) {for (let i = 0; i < fileList.length; i++) {if (fileList[i].response) {bannerUrl.push({"url":fileList[i].response.data,})} else {//将fileName= 后面的数据和&前的数据截取push到url后,转为json字符串传给后端const index = fileList[i].url.indexOf('fileName=')let newIndex: anyif (index !== -1) {const start = fileList[i].url.slice(index + 'fileName='.length)const endIndex = start.indexOf('&')if (endIndex !== -1) {newIndex = start.slice(0,endIndex)}}bannerUrl.push({"url": newIndex,})}     }}formData.venue.bannerUrl =JSON.stringify(bannerUrl) 
}

2.3 点编辑时回显(因本接口后端返回的数据需要拼接,可根据自行情况修改)

if (props.data.bannerUrl||props.data.headerUrl) {fileListJson.value.push({"url":'http://platform-file/security/chain?fileName=' + props.data.headerUrl + '&serviceCode=athletics-service',})const bannerList =  JSON.parse(props.data.bannerUrl)//json字符串转为数组console.log(bannerList,'里面有这个图片吗')for (let i = 0;i< bannerList.length;i++) {fileListJson1.value.push({"url":'后端返回的地址',})}}

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

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

相关文章

视频汇聚平台EasyCVR设备录像回看请求播放时间和实际时间对不上,是何原因?

安防监控EasyCVR视频汇聚平台可提供多协议&#xff08;RTSP/RTMP/国标GB28181/GAT1400/海康Ehome/大华/海康/宇视等SDK&#xff09;的设备接入、音视频采集、视频转码、处理、分发等服务&#xff0c;系统具备实时监控、云端录像、回看、告警、平台级联以及多视频流格式分发等视…

【自监督学习】DINO in ICCV 2021

一、引言 论文&#xff1a; DINO: Emerging Properties in Self-Supervised Vision Transformers 作者&#xff1a; Facebook AI Research 代码&#xff1a; DINO 特点&#xff1a; 对于一张图片&#xff0c;该方法首先进行全局和局部的裁剪与增强并分别送入教师和学生网络&am…

关于.NETCORE站点程序部署到nginx上无法访问静态文件和无法正确生成文件的问题解决过程。

我的netcore6项目&#xff0c;部署到IIS的时候&#xff0c;生成报告时&#xff0c;需要获取公司LOGO图片放到PDF报告文件中&#xff0c;这时候访问静态图片没有问题。 然后还有生成邀请二维码图片&#xff0c;这时候动态创建图片路径和图片也没有问题&#xff0c;可以在站点的…

本地部署:Real-ESRGAN: 高效的图像超分辨率解决方案

目录 引言 什么是 Real-ESRGAN Real-ESRGAN 的特点 工作原理 应用场景 本地部署 本地运行 实验与结果 未来发展方向 结语 Tip&#xff1a; 引言 图像超分辨率&#xff08;Super-Resolution, SR&#xff09;技术旨在从低分辨率图像生成高分辨率图像&#xff0c;应用…

初学SpringMVC之 RestFul 风格、重定向和转发

RestFul 风格改变 URL 形式 比如之前是&#xff1a;http://localhost:8080/add?a1&b2 现在是&#xff1a;http://localhost:8080/add/a/b&#xff08;全是斜杠&#xff09; package com.demo.controller;import org.springframework.stereotype.Controller; import org…

this.$confirm不要取消按钮以及右上角的差号

this.$confirm(保存成功! 订单号为&#xff1a;${res.data}, , {confirmButtonText: 确定,showCancelButton: false, // 不显示取消按钮showClose: false, // 不显示右上角的叉号type: success}).then(() > {}) 效果图下&#xff1a;

基于4G、5G和卫星宽带的应急通信车载聚合路由器组网方案

应急指挥车、现场应急指挥系统作为整个应急指挥平台的主要组成部分&#xff0c;被广泛用于救灾抢险,安全保障等特殊场景&#xff0c;可通过应急指挥车或现场应急指挥系统与后方指挥中心间传输音视频信息&#xff0c;实现现场与指挥中心的实时通信&#xff0c;进行视频会议和远程…

realsense D435l+mid360标定

目录 一、安装realsense环境 二、获取realsense D450L相机内参 三、标定雷达和相机 1.下载livox_camera_calib 2.修改配置参数 3.使用fastlio生成点云 4.标定 一、安装realsense环境 git clone https://github.com/IntelRealSense/librealsense.git cd librealsense //更…

Python基础教学之一:入门篇——迈入编程世界的第一步

Python基础教学之一&#xff1a;入门篇——迈入编程世界的第一步 一、Python简介&#xff1a;历史与现状 Python&#xff0c;一种解释型、高级和通用的编程语言&#xff0c;由Guido van Rossum在1989年圣诞节期间创造&#xff0c;并于1991年首次发布。设计哲学强调代码的可读性…

vb.netcad二开自学笔记9:界面之ribbon

一个成熟的软件怎么能没有ribbon呢&#xff0c;在前面的框架基础上再加个命令AddRibbon <CommandMethod("AddRibbon")> Public Sub AddRibbon() Dim ribbonControl As RibbonControl ComponentManager.Ribbon Dim tab As RibbonTab New RibbonTab() tab.Tit…

解决keil调试遇到的hardlfault问题

在程序开发过程中遇到的程序死机问题 导致死机的原因&#xff1a;内存溢出&#xff0c;堆栈溢出&#xff0c;数组越界&#xff0c;中断错误。。。。。。 出现这个问题&#xff0c;首先查看线程的调度关系 看最后是在哪个位置死机&#xff0c;如果rt_current_thread在main_thre…

【数据结构与算法 经典例题】判断两棵二叉树是否相同

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法 经典例题》C语言 期待您的关注 目录 一、问题描述 二、解题思路 三、C语言实现代码 一、问题描述 给你两棵二…

公共安全和应急管理系统:提升社区韧性与危机应对能力

引言 公共安全和应急管理是现代社会不可或缺的组成部分&#xff0c;其核心目标是确保社会的稳定和居民的福祉。随着全球化、城市化和技术进步&#xff0c;社会面临的风险和威胁日益复杂多样&#xff0c;从自然灾害到人为事故&#xff0c;从公共卫生危机到恐怖袭击&#xff0c;公…

高可用hadoop分布式节点的扩容

解决方案 修改hdfs-site.xml 文件 原xml文件 <?xml version"1.0" encoding"UTF-8"?> <?xml-stylesheet type"text/xsl" href"configuration.xsl"?> <!--Licensed under the Apache License, Version 2.0 (th…

运维Tips | Ubuntu 24.04 安装配置 xrdp 远程桌面服务

[ 知识是人生的灯塔,只有不断学习,才能照亮前行的道路 ] Ubuntu 24.04 Desktop 安装配置 xrdp 远程桌面服务 描述:Xrdp是一个微软远程桌面协议(RDP)的开源实现,它允许我们通过图形界面控制远程系统。这里使用RDP而不是VNC作为远程桌面,是因为Windows自带的远程桌面连接软…

回答 | 开源项目有哪些机遇与挑战?

随着全球经济和科技环境的快速变化&#xff0c;开源软件项目的蓬勃发展成为了开发者社区的热门话题。越来越多的开发者和企业选择参与开源项目&#xff0c;以推动技术创新和实现协作共赢。你如何看待当前开源项目的发展趋势&#xff1f;你在参与开源项目时有哪些经验和收获&…

单身杯_RE

唉&#xff0c;遇到几个比较繁琐的题目&#xff0c;搞的心态都有点炸了&#xff0c;0.0 magic 这题也就那样&#xff0c;初时想要用用 angr 跑了一下&#xff0c;没搞出来&#xff0c;之后再去好好搞清楚吧&#xff0c;也不是特别清楚运用。 然后就自己去看了&#xff0c;就是…

从实时监控到风险智能预警:EasyCVR视频AI智能监控技术在工业制造中的应用

随着科技的不断进步和工业制造领域的持续发展&#xff0c;传统的生产管理方式正逐渐转型&#xff0c;迈向更加智能、高效和安全的新阶段。在这个变革过程中&#xff0c;视频智能监控技术凭借其独特的优势&#xff0c;成为工业制造领域的管理新引擎&#xff0c;推动着从“制造”…

“删错文件后如何高效挽救?两大恢复策略全解析“

在数字化日益深入生活的今天&#xff0c;数据已成为我们工作、学习和娱乐不可或缺的一部分。然而&#xff0c;删错文件的经历却如同数字世界中的一场“小插曲”&#xff0c;不经意间就可能让我们陷入数据丢失的困境。无论是误触删除键、清空回收站&#xff0c;还是软件故障导致…

springboot中通过jwt令牌校验以及前端token请求头进行登录拦截实战

前言 大家从b站大学学习的项目侧重点好像都在基础功能的实现上&#xff0c;反而一个项目最根本的登录拦截请求接口都不会写&#xff0c;怎么拦截&#xff1f;为什么拦截&#xff1f;只知道用户登录时我后端会返回一个token&#xff0c;这个token是怎么生成的&#xff0c;我把它…