在企业应用的快速开发中，我们需要尽快的完成一些功能。如果您使用了Ant Design Vue，在进行表单的文件上传相关功能开发的时候，您肯定迫不及待地需要找到一篇包治百病的文章，正是如此，才有了该文的诞生，愿以此文解君忧。
方案设计前端方案设计重写a-upload的文件上传方式，使用axios来进行上传选择一个文件后立即进行上传，前端记录上传成功后的name和uid，并构建一个File实例，用于a-upload组件的已上传文件列表的回显提交前让文件列表转化为要后端要处理的uid列表后端方案设计提供一个统一上传单个文件的接口，每个文件选择后自动上传都将上传到该接口，并写入到数据库的file数据表中对表单数据新建完成后，对上传的文件列表进行当前实体记录的绑定对表单数据更新完成后，检测该实体记录的所有文件列表，对没有在该列表中的uid的文件列表进行删除，然后对该列表中所有的uid文件记录进行当前实体记录的绑定新建与更新的一致性处理方案因为更新表单在读取旧数据后，需要与新选择文件进行同样的格式化处理，这里的处理流程一样，进行回显的数据是一样的，提交表单也都是提交file表中已经存在的uid列表，所以这里的数据结构是一致的，处理起来将会更加简洁明了。让代码说话为了让各位看官老爷们便于理解，直接上代码，希望能将整件事说明白。
构建表单相关下载编写js代码请求后端接口的token、header以及baseUrl等我已默认您已经在axios的统一设置中已经配置好了为了简化axios相关操作，我们将axios进行了如下封装（您也可以按此完全使用axios来直接对数据进行提交等）：const dibootApi = {get (url, params) {return axios.get(url, { params}) }, upload(url, formData) {return service({ url, method: 'POST', data: formData}) }}export default dibootApi我们默认为demo实体中需要上传一些文件列表export default {name: 'demoForm',data () {title: '新建',// 该表单的功能标题form: this.$form.createForm(this),// 表单数据初始化，没什么好说的model: {},// 如果是更新表单，之前的数据放到这里，来做数据初始化显示之用downloadFiles: [] // 已经上传的文件列表},methods: {// 初始打开的表单时的处理（如果是更新表单，这里首先需要读取出相关数据）async open (id) {if (id === undefined) { // 没有id数据则认为是新建 this.model = {} this.afterOpen()} else { // 否则作为更新处理 const res = await dibootApi.get(`/${this.name}/${id}`) if (res.code === 0) { this.model = res.data this.title = '编辑' this.afterOpen(id) } else { this.$notification.error({ message: '获取数据失败', description: res.msg }) }} },// 更新表单在读取数据完成后的操作afterOpen (id) { // 获取该记录信息后，回显文件列表相关操作dibootApi.post(`/demo/getFiles/${id}`).then(res => { if (res.code === 0){ if (res.data.downloadFile !== undefined){ res.data.downloadFile.forEach(data => { this.downloadFiles.push(this.fileFormatter(data)) }) }} }) },// 重写a-upload的文件上传处理方式downloadFilesCustomRequest (data) { this.saveFile(data) }, // 上传并保存文件saveFile (data){ const formData = new FormData() formData.append('file', data.file) dibootApi.upload('/demo/upload', formData).then((res) => { if (res.code === 0){ let file = this.fileFormatter(res.data) // 上传单个文件后，将该文件会先到a-upload组件的已上传文件列表中的操作this.downloadFiles.push(file) } else { this.$message.error(res.msg) } }) },// 对上传成功返回的数据进行格式化处理，格式化a-upload能显示在已上传列表中的格式（这个格式官方文档有给出的）fileFormatter(data) { let file = { uid: data.uuid,// 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: data.name,// 文件名 status: 'done', // 状态有：uploading done error removed response: '{"status": "success"}', // 服务端响应内容 } return file },// 没错，删除某个已上传的文件的时候，就是调用的这里handleDownloadFileRemove (file) { const index = this.downloadFiles.indexOf(file) const newFileList = this.downloadFiles.slice() newFileList.splice(index, 1) this.downloadFiles = newFileList },// 表单校验就靠他了，不过这里面还是可以对需要提交的一些数据做些手脚的validate () { return new Promise((resolve, reject) => { this.form.validateFields((err, fieldsValue) => { if (!err) { // 设置上传文件列表 const downloadFiles = this.downloadFiles.map(o => { return o.uid }) const values = { ...fieldsValue, 'downloadFiles': downloadFiles} resolve(values) } else { reject(err) }}) }) },// 表单提交的相关操作async onSubmit () { const values = await this.validate() try { let result = {} if (this.model.id === undefined) { // 新增该记录 result = await this.add(values) } else { // 更新该记录 values['id'] = this.model.id result = await this.update(values) } // 执行提交成功的一系列后续操作 this.submitSuccess(result) } catch (e) { // 执行提交失败的一系列后续操作 this.submitFailed(e) } },// 新增数据的操作async add (values) {....},// 更新数据的操作async update (values) {...}}}编写SpringBoot相关的接口代码DemoController/**** 获取文件信息列表* @param id* @return* @throws Exception*/@PostMapping("/getFiles/{id}") public JsonResult getFilesMap(@PathVariable("id") Serializable id) throws Exception{ List files = fileService.getEntityList( Wrappers.lambdaQuery() .eq(File::getRelObjType, Demo.class.getSimpleName()) .eq(File::getRelObjId, id) ); return new JsonResult(Status.OK, files); }/**** 上传文件* @param file* @param request* @return* @throws Exception*/@PostMapping("/upload") public JsonResult upload(@RequestParam("file") MultipartFile file) throws Exception { File fileEntity = demoService.uploadFile(file); return new JsonResult(Status.OK, fileEntity, "上传文件成功"); }/**** 创建成功后的相关处理* @param entity* @return*/@Overrideprotected String afterCreated(BaseEntity entity) throws Exception {DemoDTO demoDTO = (DemoDTO) entity;// 更新文件关联信息demoService.updateFiles(new ArrayList(){{addAll(demoDTO.getDownloadFiles());}}, demoDTO.getId(), true);return null;}/**** 更新成功后的相关处理* @param entity* @return*/@Overrideprotected String afterUpdated(BaseEntity entity) throws Exception {DemoDTO demoDTO = (DemoDTO) entity;// 更新文件关联信息demoService.updateFiles(new ArrayList(){{addAll(demoDTO.getDownloadFiles());}}, demoDTO.getId(), false);return null;}DemoService@Override public File uploadFile(MultipartFile file) { if(V.isEmpty(file)){ throw new BusinessException(Status.FAIL_OPERATION, "请上传图片"); } String fileName = file.getOriginalFilename(); String ext = fileName.substring(fileName.lastIndexOf(".")+1); String newFileName = S.newUuid() + "." + ext; //TODO: 需要对合法的文件类型进行验证 if(FileHelper.isImage(ext)){ throw new BusinessException(Status.FAIL_OPERATION, "请上传合法的文件类型"); }; // 说明：此处为我们的处理流程，看官们需要根据自己的需求来对文件进行保存及处理（之后我们的File组件开源之后也可以按照此处的处理）String filePath = FileHelper.saveFile(file, newFileName); if(V.isEmpty(filePath)){ throw new BusinessException(Status.FAIL_OPERATION, "图片上传失败"); }File fileEntity = new File(); fileEntity.setRelObjType(Demo.class.getSimpleName()); fileEntity.setFileType(ext); fileEntity.setName(fileName); fileEntity.setPath(filePath); String link = "/file/download/" + D.getYearMonth() + "_" + newFileName; fileEntity.setLink(link);boolean success = fileService.createEntity(fileEntity); if (!success){ throw new BusinessException(Status.FAIL_OPERATION, "上传文件失败"); } return fileEntity; }@Override public void updateFiles(List uuids, Long currentId, boolean isCreate) { // 如果不是创建，需要删除不在列表中的file记录 if (!isCreate){ fileService.deleteEntities(Wrappers.lambdaQuery().notIn(File::getUuid, uuids)); } // 进行相关更新 boolean success = fileService.updateEntity( Wrappers.lambdaUpdate() .in(File::getUuid, uuids) .set(File::getRelObjType, Demo.class.getSimpleName()) .set(File::getRelObjId, currentId)); if (!success){ throw new BusinessException(Status.FAIL_OPERATION, "更新文件信息失败"); } }提示该文章所有代码皆为方案示例，其中有些许删减，不确保能直接运行，如果各位有好的想法，欢迎一起探讨。diboot 简单高效的轻代码开发框架 (求star)