ant design多文件上传-缩略图丢失

最新推荐文章于 2024-08-14 15:58:05 发布
最新推荐文章于 2024-08-14 15:58:05 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Emily_Susu/article/details/105774529
版权
在使用Ant Design的upload组件时，遇到上传成功后缩略图显示为SVG图标的问题。原因是upload组件在文件上传成功后，未给file对象的thumbUrl赋值。解决方法是在Upload.js中，当文件上传成功后，将返回的URL赋值给thumbUrl，以避免base64字符串过大导致的浏览器卡顿。同时，此方法也适用于没有生成base64的文件，确保所有文件都有缩略图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、使用uploadList自动上传，上传成功后，缩略图丢失，出现了svg图标，如图在这里插入图片描述
2、究其原因，缩略图的显示是因为，upload组件触发handleChange事件，在uploadList 组件上的 previewFile再次触发，fileList 更新时存储缩略图，此时发现缩略图丢失是因为上传的文件没有给file.thumbUrl赋值为base64。
源码UploadList.js
在这里插入图片描述
在这里插入图片描述

3、解决方法，在Upload.js文件中，添加
targetItem.thumbUrl= window._CONFIG[‘domianURL’] + ‘/sys/common/view/’+ response.message，为了防止预览时由于base64这个字符串太大了，造成浏览器卡顿，把url换成服务器地址即可，同时也给没有生产base64的文件添加上了url
在这里插入图片描述

根据上图的源码可以看出，缩略图的显示

最低0.47元/天 解锁文章
程序员如何避免职场内耗？3步搞定团队冲突管理
AI天才研究院
05-18 683
在技术团队中，程序员的时间成本占比呈现独特分布：据Stack Overflow 2023年开发者报告，全球程序员平均37%的工作时间消耗在非编码任务，其中22%直接与团队协作冲突相关。这些隐性损耗（如需求反复变更、技术方案争论、任务返工）形成"职场内耗"，不仅导致代码交付延迟，更会引发技术人员的挫败感与离职倾向。本文聚焦程序员视角，构建从冲突预防到持续优化的全链路管理体系，提供可量化、可复现的工程化解决方案，适用于敏捷开发团队、分布式协作团队及传统技术部门。问题解构：分析内耗的三大技术团队特异性诱因。
react-antd中使用Upload实现图片裁剪-上传-预览的功能
weixin_45745641的博客
04-01 3031
前言 使用react中antd实现图片的上传裁剪和预览，记录一下实现过程，希望能对大家有帮助 实现 我们这里用到的是antd框架，实现 图片上传的功能我们需要安装一个插件antd-img-crop yarn add antd-img-crop 然后就可以进行使用： import React, { memo, useState } from 'react' import { Upload } from 'antd' import ImgCrop from ' ' export default memo(
antd design(4.x)中Upload应用------编辑缩略图
小怪兽
04-22 1863
import React, { useState, useEffect } from 'react'; import style from './index.less'; import { EditOutlined, SettingTwoTone, PlusOutlined } from '@ant-design/icons'; import defaultImg from './img/defa...
上传 多选文件，有部分文件会丢失
w_jiunian的博客
04-12 830
<template> <div class="upload-file"> <!-- multiple 多选文件，有部分文件会丢失 --> <el-upload v-show="isDel" :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="modelValue" :limit="limit".
使用antd中的Upload组件上传图片
weixin_44471622的博客
04-17 7588
实现的功能： 上传图片 支持预览和删除 新上传的图片的不支持下载功能，应该是在本地上传的图片没有找到对应的url upload文件 用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。 import React from 'react'; import { Upload, Icon, Modal, message } from 'antd'; import $state...
vue上传视频时取第一帧做缩略图
青春不打烊的博客
12-19 1655
【代码】vue上传视频时取第一帧做缩略图。
ant design Table显示图片
最新发布
12-28
{/* 显示缩略图 */} () => setImageVisible(true)} /> {/* 模态框用于预览大图 */} () => setIsImageVisible(false)}> ), }, ]; // 定义模态框可见性的状态管理 function App() { const ...
JavaSE_8【IDE开发工具Idea使用】
yanyu1994的博客
07-26 2292
IDEA 全称IntelliJ IDEA，是Java语言开发的集成环境，目前已经渐渐代替了Eclipse的使用。IntelliJ在业界被公认为最好的Java开发工具之一，因其功能强悍、设置人性化，而深受Java、大数据、移动端程序员的喜爱。本着"工欲善其事必先利其器"的精神，本套视频从IDEA的介绍、安装、设置入手，讲解IDEA中项目的创建、模板的使用、断点调试等。 说明：本文档所有截图针对IntelliJ IDEA 2019.2.3 x64版本。 一、IntelliJ IDEA 介绍 1、JetBrai
面试题精选汇总（实时更新）(评论区欢迎补充)
qq_52700250的博客
08-14 844
面试题精选汇总
Ant Design的Upload上传文件列表不对？解决方法
清颖的博客
10-21 3460
在Upload组件中经常用的就是受控的显示和上传。 我经常遇到的是这种情况：完全受控组件。 这样一定要记得： 设置fileList属性。它决定了文件列表默认显示什么，以及上传后显示什么！ onChange方法的其中两个重要且常用的参数：file、fileList。参数解释如下： file：当前操作的文件对象。 { uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png' // 文件名 status: 'don
Antd的Upload上传组件的使用方式
m0_47014098的博客
03-28 2178
【代码】Antd的Upload上传组件的使用方式。
React antd upload组件上传视频并实现视频预览
zzzzlong的博客
09-19 3533
记录问题：antd的upload组件文档中对于视频的上传预览没有明确的文档demo，在这里记录一下。项目需求：支持图片及视频的上传并实现预览，点击上传后不会立即请求接口上传资源，后续点击确定再上传。
ElementUi:图像上传成功后刷新图片不显示
W_change_red的博客
02-08 676
ElementUi:图像上传成功后刷新图片不显示
antd 踩坑 upload组件 上传成功未显示图片--1
zjn1723168668的博客
06-05 8493
关于antd官方文档的坑 首先先说一下antd的官方文档。 我不知道他们是怎么在管理站点的，文档内容估计很长一段时间没有更新了。这次公司项目中用到这个upload组件卡了我近两天，就是找不到跳出他们规定格式的坑。 onChange事件 这个事件对于常常自由发挥的程序员来说，可以说是毫无用处（可能是我还没有必须用到它的地方），首先它只是用来改变状态的，文档中他被用来改变上upload组件的l...
ant design 列表字段内容缩略，鼠标放上去显示全部
殇之何伤的博客
08-06 3445
只需要在列中定义即可 import { Tooltip } from 'antd'; columns = [ { title: '识别结果', dataIndex: 'ocrTxt', ellipsis: true, render: value => <Tooltip title={value}> <div className="ellipsis" style={{
antdesign vue upload上传pdf缩略图无法预览问题
zhcinit0的博客
10-14 3422
antdesign vue upload图片上传、pdf上传及预览
ant-design-vue 4.x升级问题-样式丢失问题
前端
08-05 4762
该文档是在升级ant-design-vue到4.x版本的时候遇到的问题。
使用a-upload上传图片或者文件(符合规则，显示在fileList，不符合不显示)
chali1314的博客
04-25 3622
文件或者图片上传
ant-design Vue 上传图片upload和复制粘贴上传结合，实现点击、拖拽、复制粘贴上传图片
weixin_44093954的博客
06-01 1950
ant-design Vue 上传图片upload和复制粘贴上传结合，实现点击、拖拽、复制粘贴上传图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值