Antd Upload组件控制部分文件不可以删除

需求描述

甲方：我们在管理某条数据的时候可能从两个不同的地方上传文件。当我们从A地方上传文件以后，要在去B地方再上传一份文件（总共两份文件）要求在A地方上传的文件在B地方要显示，并加上特殊标记，并且不可以删除（这tm什么奇怪的需求！？）

如何实现？

尽管这个需求有点让人难受，但是还是需要做的，首先能想到的就是把不能删除的文件的删除按钮去掉就好了。然后要实现这个又需要你能控制Upload组件的fileList渲染，这怎么办？Antd官方已经替我们想到了！Upload组件有一个内置方法itemRender这个方法如何使用呢？看下官方文档的解释，方法中文解释是自定义上传列表项是一个函数，接收三个参数，我们要用到的是第一个参数（originNode）和 第二个参数（file）；fileList有几个文件，这个函数就会被执行几次。如果你将originNode用一个div包裹起来再返回

<Upload itemRender={(originNode,file,currentFileList) => {return <div>{originNode}</div>}}/>

你会发现跟原本的效果是一样的。

最终处理

这样的话我们就可以通过设置className来区分开是否要展示途中的删除按钮，并可以区分开是从哪里来的了，主要是通过第二个参数来判断，Upload回显需要fileList，官方demo有几个参数，我们可以自定义参数上传的时候给后台多传参数，标明上传位置，回显的时候只需要根据标志来加不同className就可以了，这里我们用一个flag来区别。

fileList = [{uid: '1',name: 'xxx.png',flag: true,status: 'done',url: '/xxx.png',},{uid: '2',name: 'yyy.png',flag: false,status: 'done',url: '/yyy.png',},];//这样的话第二个参数file就是上面这些属性了。itemRender={(originNode,file,currentFileList) => {return <div className={file.flag ? "hidden" : "show"}>{originNode}<div>{file.flag ? "A处上传不能删除" : "B处上传可以修改删除"}</div></div>}}

给外层加上className之后我们就可以根据全局样式来控制删除按钮显示与否，并且标明出处

从两张图片中可以很明显看出第一张图是不可以删除的，第二章是可以删除的,并且可以标明出处,至此问题解决，感谢阅览。