在VUE前端开发中，一般会采用前端UI框架来实现基础UI的搭建，如ElementUI以及AntD，今天，我们讨论一个照片墙组件的定制开发，基于的框架是AntD，一般情况下，其它框架或组件的定制方式大同小异。

之所以出现定制需求，是因为AntD中的照片墙组件Upload内嵌了后台管理逻辑，即跟服务器的交互已经通过action，method等参数实现了，但商业开发中，后台交互一般有统一的API接口并遵循统一的安全机制，因此，Upload和后端的交互就需要通过定制去使用商业API而非自包含的后台交互逻辑。

Upload的定制接口是预留的，使用起来比较方便，重要的点包括如下几个：

预留接口的定义

AntD采用预留接口为customRequest，接口说明如下：

在组件中，通过属性定义，如下图，我定义一个新函数onUpload：

自定义接口函数的实现要点

Upload主要实现一个IPO结构，输入上传的文件，输出为成功或失败的结论，大致的实现逻辑如下：

onUpload中，我们接管了组件通过data传入的file信息，以及上传成功和失败的两个回调函数onSuccess和onError，而真正的上传操作，我们通过this.$nsdHandler.uploadFile来实现了，这个函数会根据调用结果分别回调onSuccess和onError做前端UI的更新。

删除接口

以上是上传接口，删除接口道理是一样的，Upload组件预留了remove属性作为删除的回调，因此，我们可以定制删除函数如下：

参数格式

这里有个问题要注意一下，Upload组件是通过fileList数组管理照片墙照片的，一个传参文件的参数结构如下图所示：

上述结构在初始化时，Upload会生成全新的file信息，我们在进行组件定制时，如果后端的返回结构和Upload默认组件不符，可以借助Upload生成的file对象中有一个字段叫response来做一下转化，也就是说，这是Upload存放原始数据格式的地方。

当然也可以自己修改Upload的参数结构，因为我这里应用比较简单，做一下简单转化就可以了，感兴趣的朋友可以自己试一下参数结构的全定制，有成果欢迎随时和我交流。