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

最新推荐文章于 2024-05-14 11:22:12 发布
最新推荐文章于 2024-05-14 11:22:12 发布
阅读量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这个字符串太大了，造成浏览器卡顿，把url换成服务器地址即可，同时也给没有生产base64的文件添加上了url
在这里插入图片描述

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

最低0.47元/天 解锁文章
Emily_Susu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-antd中使用Upload实现图片裁剪-上传-预览的功能
weixin_45745641的博客
04-01 2890
前言 使用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(
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-VUE-JEECG JUPLOAD上传视频回显
weixin_58248573的博客
10-16 420
开发的时候选用了ant-design-vue-jeecg 这么一个组合，客户提出想要在编辑页面预览视频，简单记录一下实现方法。
在前端开发中，文件上传和预览功能是常见的需求之一。本文将介绍如何利用 Ant Design Vue 组件库实现文件上传与预览功能。我们将使用 Ant Design Vue 中的 Upload 组件来实
最新发布
weixin_61662162的博客
05-14 729
- 使用 Ant Design 的 Upload 组件实现文件上传 --> < a-upload v-model: file-list = " fileList " :action="uploadFileParams.url" :headers="uploadFileParams.headers"
antd design(4.x)中Upload应用------编辑缩略图
小怪兽
04-22 1697
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 7213
实现的功能： 上传图片 支持预览和删除 新上传的图片的不支持下载功能，应该是在本地上传的图片没有找到对应的url upload文件 用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。 import React from 'react'; import { Upload, Icon, Modal, message } from 'antd'; import $state...
vue上传视频时取第一帧做缩略图
青春不打烊的博客
12-19 1419
【代码】vue上传视频时取第一帧做缩略图。
Ant Design的Upload上传文件列表不对？解决方法
清颖的博客
10-21 3048
在Upload组件中经常用的就是受控的显示和上传。 我经常遇到的是这种情况：完全受控组件。 这样一定要记得： 设置fileList属性。它决定了文件列表默认显示什么，以及上传后显示什么！ onChange方法的其中两个重要且常用的参数：file、fileList。参数解释如下： file：当前操作的文件对象。 { uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png' // 文件名 status: 'don
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-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： ...git clone https://github.com/vueComponent/ant-
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
Antd的Upload上传组件的使用方式
m0_47014098的博客
03-28 1780
【代码】Antd的Upload上传组件的使用方式。
React antd upload组件上传视频并实现视频预览
zzzzlong的博客
09-19 2305
记录问题：antd的upload组件文档中对于视频的上传预览没有明确的文档demo，在这里记录一下。项目需求：支持图片及视频的上传并实现预览，点击上传后不会立即请求接口上传资源，后续点击确定再上传。
ElementUi:图像上传成功后刷新图片不显示
W_change_red的博客
02-08 583
ElementUi:图像上传成功后刷新图片不显示
antd 踩坑 upload组件 上传成功未显示图片--1
zjn1723168668的博客
06-05 8236
关于antd官方文档的坑 首先先说一下antd的官方文档。 我不知道他们是怎么在管理站点的，文档内容估计很长一段时间没有更新了。这次公司项目中用到这个upload组件卡了我近两天，就是找不到跳出他们规定格式的坑。 onChange事件 这个事件对于常常自由发挥的程序员来说，可以说是毫无用处（可能是我还没有必须用到它的地方），首先它只是用来改变状态的，文档中他被用来改变上upload组件的l...
ant design 列表字段内容缩略，鼠标放上去显示全部
殇之何伤的博客
08-06 3284
只需要在列中定义即可 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 2921
antdesign vue upload图片上传、pdf上传及预览
ant-design-vue 4.x升级问题-样式丢失问题
前端
08-05 3423
该文档是在升级ant-design-vue到4.x版本的时候遇到的问题。
@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、付费专栏及课程。

余额充值