React 的 Upload 文件表单编辑回显及 onChange 自定义回调的方式

Posted 2022-01-22 毕小宝

背景

本文介绍 antd 的 Upload 组件编辑回显的方式，以及 onChange 回调函数的使用说明。

主要知识点如下：

1. Upload 文件上传表单，在编辑回显时，如何初始化数据？
2. Upload 自定义 onChange 回调函数，如何传入额外的参数？
3. React 如何通过 setState 修改数组的某一元素的值？

Upload 组件基础知识

Upload 组件提供了默认的 onChange 回调，它会回显上传文件名称，显示全部上传的文件。如果需要限制上传文件个数，使用默认回调函数且加属性 maxCount = 1 可以达到这个效果。

但是，开发过程中通常需要自定义 onChange 事件，此时就要动态更新 Upload 的 fileList 属性，它的类型是数组，可以用 slice 实现只保留最新上传的文件信息的功能。

使用 Upload 的基本过程如下：

第一步，定义一个全局 state 变量，存储 Upload 的文件信息。

第二步，定义 onChange 事件，决定如何处理文件上传的结果。文件上传发送请求给 action 路径，上传文件到服务器后，可以返回服务器端该文件存储的路径，作为整个表单提交的信息。

onFileChange