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

最新推荐文章于 2024-04-12 13:19:46 发布
最新推荐文章于 2024-04-12 13:19:46 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Emily_Susu/article/details/105774529
版权

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这个字符

最低0.47元/天 解锁文章
Emily_Susu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ANT-DESIGN-VUE-JEECG JUPLOAD上传视频回显
weixin_58248573的博客
10-16 404
开发的时候选用了ant-design-vue-jeecg 这么一个组合，客户提出想要在编辑页面预览视频，简单记录一下实现方法。
react-antd中使用Upload实现图片裁剪-上传-预览的功能
weixin_45745641的博客
04-01 2880
前言 使用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 pro 5 结合express 上传多个文件_antd 表单上传多文件
最新发布
04-12 256
用户选择多个文件后，你可以通过onChange事件获取到选中的所有文件对象数组，然后使用FormData对象打包这些文件并发送到服务器。在Express服务器端接收文件并保存。
antd design(4.x)中Upload应用------编辑缩略图
小怪兽
04-22 1688
import React, { useState, useEffect } from 'react'; import style from './index.less'; import { EditOutlined, SettingTwoTone, PlusOutlined } from '@ant-design/icons'; import defaultImg from './img/defa...
使用antd中的Upload组件上传图片
weixin_44471622的博客
04-17 7185
实现的功能： 上传图片 支持预览和删除 新上传的图片的不支持下载功能，应该是在本地上传的图片没有找到对应的url upload文件 用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。 import React from 'react'; import { Upload, Icon, Modal, message } from 'antd'; import $state...
vue上传视频时取第一帧做缩略图
青春不打烊的博客
12-19 1394
【代码】vue上传视频时取第一帧做缩略图。
Antd的Upload上传组件的使用方式
m0_47014098的博客
03-28 1749
【代码】Antd的Upload上传组件的使用方式。
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
$ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } ,...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
ant-design-vue-pro-master.zip
08-20
《Ant Design Vue Pro Master源码解析与多页签实现》 Ant Design Vue Pro Master是一个基于Ant Design Vue的前端项目框架，提供了丰富的UI组件和优化的开发体验。此压缩包包含了项目的一个特定版本，该版本特别支持...
ant-design-mobile-rn：用于React Native的Ant设计
02-01
English |蚂蚁设计移动RN 可配置的...pod installyarn ios # or yarn android安装与使用$ npm install @ant-design/react-native --save 要么yarn add @ant-design/react-native安装对等依赖项（4.0.0+） npm inst
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： ...git clone https://github.com/vueComponent/ant-
React antd upload组件上传视频并实现视频预览
zzzzlong的博客
09-19 2154
记录问题：antd的upload组件文档中对于视频的上传预览没有明确的文档demo，在这里记录一下。项目需求：支持图片及视频的上传并实现预览，点击上传后不会立即请求接口上传资源，后续点击确定再上传。
ElementUi:图像上传成功后刷新图片不显示
W_change_red的博客
02-08 576
ElementUi:图像上传成功后刷新图片不显示
antd 踩坑 upload组件 上传成功未显示图片--1
zjn1723168668的博客
06-05 8204
关于antd官方文档的坑 首先先说一下antd的官方文档。 我不知道他们是怎么在管理站点的，文档内容估计很长一段时间没有更新了。这次公司项目中用到这个upload组件卡了我近两天，就是找不到跳出他们规定格式的坑。 onChange事件 这个事件对于常常自由发挥的程序员来说，可以说是毫无用处（可能是我还没有必须用到它的地方），首先它只是用来改变状态的，文档中他被用来改变上upload组件的l...
ant design 列表字段内容缩略，鼠标放上去显示全部
殇之何伤的博客
08-06 3275
只需要在列中定义即可 import { Tooltip } from 'antd'; columns = [ { title: '识别结果', dataIndex: 'ocrTxt', ellipsis: true, render: value => <Tooltip title={value}> <div className="ellipsis" style={{
ant-design-vue 4.x升级问题-样式丢失问题
前端
08-05 3282
该文档是在升级ant-design-vue到4.x版本的时候遇到的问题。
使用a-upload上传图片或者文件(符合规则，显示在fileList，不符合不显示)
chali1314的博客
04-25 2767
文件或者图片上传
react-redux管理数据在使用ant.design使用Upload上传图片时，无法渲染图片！
pgLi
07-06 483
1、背景： 使用react-redux管理数据，在使用Upload上传时，单独开辟预览区域，使用thumbUrl展示预览图片，在state更新后，dom有时可以更新，有时更新不了。 2、原因： Upload组件在onChange事件中，file的thumbUrl属性是异步添加的，在更新props时，这个值有时会不存在，导致dom无法渲染。 3、解决办法： 异步再次dispatch一次 setTimeout(() => { const thumbUrl = value.fileL.
@ant-design/pro-components 和@ant-design/pro-protable的区别
06-26
@ant-design/pro-components 和@ant-design/pro-table都是Ant Design Pro中的组件库，但它们的定位和功能略有不同。 @ant-design/pro-components是Ant Design Pro中的基础组件库，包含了一些常用的UI组件，如按钮、表单、表格、提示框、标签等等。这些组件都是经过Ant Design团队精心设计的，具有良好的可定制性和易用性。 @ant-design/pro-table则是Ant Design Pro中的表格组件库，它提供了丰富的表格功能，如分页、排序、筛选、搜索、导出等等，而且还支持多种数据源，包括API、Mock数据和本地数据，非常适合开发中后台管理系统。 总之，如果你需要开发一个中后台管理系统，可以同时使用@ant-design/pro-components和@ant-design/pro-table来快速构建UI和表格功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值