【React工作记录八十七】React+antDesign实现上传图片功能(类组件)

前端大歌谣

已于 2023-03-15 11:37:42 修改

阅读量193

点赞数

分类专栏：前端项目工作实战文章标签： react.js javascript 前端

于 2023-03-15 11:30:02 首次发布

本文链接：https://blog.csdn.net/geyaoisnice/article/details/129548789

版权

前端项目工作实战专栏收录该内容

143 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用React和AntDesign库封装一个上传图片的功能。包括子组件UploadImage和BaseUploadImage的封装，以及接口调用和样式设置。通过实例展示了在前端项目中实现图片上传的详细步骤。

摘要由CSDN通过智能技术生成

前言

大家好我是歌谣今天继续给大家带来工作中实战部分的一些代码的封装和认识

需求实现

1可以支持上传最多九张图片
2图片支持预览 替换 删除
3支持自定义上传文件大小 格式 未上传提示

实现效果

在这里插入图片描述

子组件封装

UploadImage组件

 * @Description: 公共上传图片
 * @param {Array} type 图片格式。默认类型为png，jpeg
 * @param {Number} size 图片限制大小 默认大小为8M
 * @param {String} errorTypeMsg 图片格式错误文字提示
 * @param {String} errorTypeMsg 图片大小错误文字提示
 * @param {Function} handleFetchUrl 选中图片后回调函数
 * @param {String} uploadUrl 上传图片请求的url，默认为admin/fileUpload
 * @param