Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言

在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了Ant Design Vue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的诞生,愿以此文解君忧。

方案设计

前端方案设计

  • 重写a-upload的文件上传方式,使用axios来进行上传
  • 选择一个文件后立即进行上传,前端记录上传成功后的name和uid,并构建一个File实例,用于a-upload组件的已上传文件列表的回显
  • 提交前让文件列表转化为要后端要处理的uid列表

后端方案设计

  • 提供一个统一上传单个文件的接口,每个文件选择后自动上传都将上传到该接口,并写入到数据库的file数据表中
  • 对表单数据新建完成后,对上传的文件列表进行当前实体记录的绑定
  • 对表单数据更新完成后,检测该实体记录的所有文件列表,对没有在该列表中的uid的文件列表进行删除,然后对该列表中所有的uid文件记录进行当前实体记录的绑定

新建与更新的一致性处理方案

  • 因为更新表单在读取旧数据后,需要与新选择文件进行同样的格式化处理,这里的处理流程一样,进行回显的数据是一样的,提交表单也都是提交file表中已经存在的uid列表,所以这里的数据结构是一致的,处理起来将会更加简洁明了。

让代码说话

为了让各位看官老爷们便于理解,直接上代码,希望能将整件事说明白。

构建表单

  
<a-form :form="form">  
    <a-form-item label="名称" style="margin-bottom: 0;">  
        <a-input v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" />  
    </a-form-item>
    <a-form-item>  
      <a-upload  
      :multiple="true"  
      :fileList="downloadFiles"  
      :remove="handleDownloadFileRemove"  
      :customRequest="downloadFilesCustomRequest"  
      >  
        <a-button class="upload-btn"> <a-icon type="upload" > 相关下载 </a-button>  
      </a-upload>  
    </a-form-item>
</a-form>

编写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<File> files = fileService.getEntityList(  
            Wrappers.<File>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
*/
@Override
protected String afterCreated(BaseEntity entity) throws Exception {
    DemoDTO demoDTO = (DemoDTO) entity;
    // 更新文件关联信息
    demoService.updateFiles(new ArrayList<String>(){{
        addAll(demoDTO.getDownloadFiles());
    }}, demoDTO.getId(), true);
    return null;
}

/***
* 更新成功后的相关处理
* @param entity
* @return
*/
@Override
protected String afterUpdated(BaseEntity entity) throws Exception {
    DemoDTO demoDTO = (DemoDTO) entity;
    // 更新文件关联信息
    demoService.updateFiles(new ArrayList<String>(){{
        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<String> uuids, Long currentId, boolean isCreate) {  
    // 如果不是创建,需要删除不在列表中的file记录  
    if (!isCreate){  
        fileService.deleteEntities(Wrappers.<File>lambdaQuery().notIn(File::getUuid, uuids));  
    }  
    // 进行相关更新  
    boolean success = fileService.updateEntity(  
            Wrappers.<File>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)

Image placeholder
点点点
未设置
  62人点赞

没有讨论,发表一下自己的看法吧

推荐文章
基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

Python可视化 | Seaborn5分钟入门(二)——barplot&countplot&pointplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

vue基于vant的uploader上传图片

小白第一次使用有赞的vant组件库,这里记录一下个人在项目上的一些使用,方便以后查阅. {{item.goods_title}} {{item.sku_param_value}} 愉

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

基于Redis实现Spring Cloud Gateway的动态管理

引言:SpringCloudGateway是当前使用非常广泛的一种API网关。它本身能力并不能完全满足企业对网关的期望,人们希望它可以提供更多的服务治理能力。但SpringCloudGateway并不

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了心想:知乎

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

CSS实现多行省略

什么是多行省略?当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。同行这么做:

基于ApiBoot的前后分离演示脚手架诞生了~

知识改变命运,撸码使我快乐,2020继续游走在开源界点赞再看,养成习惯给我来个Star吧,ApiBootAdmin源码仓库:https://gitee.com/minbox-projects/api-

侵入式服务治理方案,读这一篇就够

尽管在程序执行效率上,Java不如C、C++,在开发效率、易用性以及学习难度上,Java又不如Ruby、Python、Go,但Java无疑是当今后端系统开发中使用最为广泛的语言。Java所累积的大量生

redis实践及思考

导语:当面临存储选型时是选择关系型还是非关系型数据库?如果选择了非关系型的redis,redis常用数据类型占用内存大小如何估算的?redis的性能瓶颈又在哪里?背景前段时间接手了一个业务,响应时间达

ant design有vue版本吗?

antdesign有vue版本吗?有vue版本,对应的名称为ant-design-vue。在vue项目中使用npmi--saveant-design-vue命令进行安装,然后即可使用。ant-desi

ant-design-vue按需加载出错怎么办?

ant-design-vue按需加载出错怎么办?按照官方文档引入antd时,到了按需加载那步出错了,提示errorin./node_modules/ant-design-vue/es/style/in

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

十年软件通胀率:从 2009 到 2019 年,软件越来越昂贵

过去十年,软件定价逐渐上升。在我们调查的一百个商业应用程序中,价格平均上涨了62%,其中包括一些比较便宜的应用程序。如果用户现在花钱购买一款应用程序,那么它很可能比十多年前的价格贵98%以上。

Python可视化 | Seaborn5分钟入门(一)——kdeplot和distplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(三)——boxplot和violinplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

.vue文件怎么使用组件?

.vue文件怎么使用组件?在vue中组件以.vue结尾,一个.vue文件就是一个组件。下面介绍下在组件中使用其他组件的方法。(相关课程推荐:Vue.js教程)1、首先创建一个组件MyTest.vue

为什么要前后端分离?有什么优缺点

作者:Cherry300来源:jianshu.com/p/c86cee16b418一、前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个node

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

Pandas数据处理三板斧——map、apply、applymap详解

微信公众号:「Python读财」如有问题或建议,请公众号留言在日常的数据处理中,经常会对一个DataFrame进行逐行、逐列和逐元素的操作,对应这些操作,Pandas中的map、apply和apply