需求描述
甲方:我们在管理某条数据的时候可能从两个不同的地方上传文件。当我们从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: 'http://www.baidu.com/xxx.png',
},
{
uid: '2',
name: 'yyy.png',
flag: false,
status: 'done',
url: 'http://www.baidu.com/yyy.png',
},
];
//这样的话第二个参数file就是上面这些属性了。
itemRender={(originNode,file,currentFileList) => {
return <div className={file.flag ? "hidden" : "show"}>
{originNode}
<div>{file.flag ? "A处上传不能删除" : "B处上传可以修改删除"}</div>
</div>
}}
给外层加上className之后我们就可以根据全局样式来控制删除按钮显示与否,并且标明出处
从两张图片中可以很明显看出第一张图是不可以删除的,第二章是可以删除的,并且可以标明出处,至此问题解决,感谢阅览。