山东大学项目实训(十七)—— 微信小程序附件上传、下载、预览、删除

附件相关功能再实现

下图为笔者之前所写的博客关于实现的附件上传,但是没有下载、预览和删除。正因为没有下载、预览和删除功能,笔者才不得不去重新实现附件相关功能。
在这里插入图片描述

附件业务功能介绍

  • 附件上传
    用户可以选择相应附件进行上传。
  • 附件预览
    用户上传完附件或者当用户下载完附件后,可以进行附件预览 (仅支持doc、docx、ppt、pptx、xls、xlsx、pdf文件格式以及图片预览)
  • 附件删除
    在编辑不良事件报告等可以上传相应附件的地方,可以进行相应附件的删除。
  • 附件下载
    附件下载使用场景在于查看事件详情、加载暂存。

设计步骤

  1. 视图设计,根据需求场景, 可以提供一个按钮触发附件上传事件,也可以提供当附件上传完或者附件下载完后, 显示上传成功的附件列表,以及提供预览和删除按钮。
    这里选取了编辑不良事件报告的附件上传视图,因为它包含了所有附件功能,便于介绍。
    在这里插入图片描述
  2. 附件上传请求封装,根据uniapp提供的uni.uploadFile接口,结合之前封装网络请求的经验,对附件上传请求进行封装,便于使用。
    在这里插入图片描述
    在这里插入图片描述
  3. 使用封装好的附件上传接口,在上传相关附件按钮的点击事件中实现选择并自动服务器发起上传附件的请求功能。 之前的博客写到过,由于微信小程序的附件上传不能多文件上传,只能单个文件一个个上传,所以笔者对每个附件进行了循环上传。
    在这里插入图片描述
    在这里插入图片描述
  4. 附件下载请求封装, 在加载暂存内容、查看事件详情时,进行有关附件的下载。同附件上传请求封装过程,在uniapp文档提供的附件下载接口的基础上进行再封装。
    在这里插入图片描述在这里插入图片描述
  5. 使用封装好的附件下载接口,在加载暂存内容、查看事件详情时,进行有关附件的下载。
    在这里插入图片描述加载暂存内容
    在这里插入图片描述查看事件详情
    在这里插入图片描述
    在这里插入图片描述
  6. 附件预览,当附件上传完或者附件下载完后,显示上传成功的附件列表,然后可以预览在列表的对应附件。 uniapp提供的文档里面有个巨坑!!!—— 在下图可以清晰看到,支付宝小程序必填,其他平台非必填。由于笔者开发的微信小程序,故笔者一开始并没有填这个字段,然后一直报错,debug了半天!!!解决方法就是填上这个字段。
    因为用户上传的文件是未可知的,有可能是txt、ppt、pdf、jpg等文件格式,因此笔者进行了区分实现,如果是图片,则使用uniapp提供的预览图片接口,否则就预览文件。
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
  7. 附件删除,由于后端实现的逻辑,因此直接移除filesList中文件即可。
    在这里插入图片描述

我的上报查看事件详情 (补充)

因为在写我的上报查看事件详情博客的时候,没有介绍附件功能的再实现,因此笔者没有介绍其与附件相关的功能,所以在这里进行补充 —— 既然能够查看事件详情,那必然是能够下载并预览用户所编写的事件内上传的附件的。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/long99920/article/details/124622513