SpringBoot Vue 批量上传附件与打包压缩下载附件

最新推荐文章于 2025-01-12 15:06:48 发布

原创

最新推荐文章于 2025-01-12 15:06:48 发布 · 1.2k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#java

前言：

在传统的管理系统项目一般都遇到有附件的上传与下载业务，我最近参与的项目中用到了附件的上传与下载功能，今天正好有空整理一下。

业务逻辑：

附件先上传到临时目录，业务页面点击保存后临时目录附件移动到正式目录下，并将业务数据和附件相关信息保存入库。

废话不多说，直接上代码！！！

1. 批量上传附件

前端 vue 代码

前端使用 Element-UI 的上传控件

<el-card>
            <h1>1.上傳附件</h1>
            <el-upload
                    class="upload-demo"
                    drag
                    :headers="headers"
                    name="files"
                    :on-remove="remove"
                    :on-success="success"
                    :auto-upload="true"
                    action="api/basic/file/uploadFile"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传doc docx文件，且不超10MB</div>
            </el-upload>
</el-card>

上图中 :on-success="success" 代表附件上传成功后的钩子

接收后端返回的临时目录

      //文件上传成功时的钩子
      success(res, file, fileList) {
        this.fileList.length = 0
        for (let i = 0; i < fileList.length; i++) {
          if(fileList[i].response)
            this.fileList.push(fileList[i].response.list[0])
        }
        console.log(`已上传文件列表`, this.fileList)
      },

后端接口

配置文件的上传路径（前缀）在application-dev.yml 中，项目打包发布到对应的服务，附件上传后的位置就是配置的路径

#配置文件上传地址
file:
  #本地路径
#  path: F:/upload/
 # 服务器地址
  path: /data/uploadFile/

获取application-dev.yml配置路径

    /**
     *@Description 文件上传处理方法 临时目录
     *@Param MultipartFile file
     *@Author
     *@Date  2020/4/22  18:24
     *@return R
     */
    @PostMapping("/uploadFile")
    public R uploadFile(@RequestParam(required = false, value = "files") MultipartFile[] multipartFiles) throws IOException {
        List<AccessoryQueryExt> list = new ArrayList<AccessoryQueryExt>();
        if(multipartFiles.length > 0){
            for (MultipartFile file : multipartFiles){
                R r = fileService.uploadFile(file,filePath);
                String path = (String) r.get("path");
                String fileName = (String) r.get("fileName");
                AccessoryQueryExt accessoryQueryExt = new AccessoryQueryExt();
                accessoryQueryExt.setName(fileName);
                accessoryQueryExt.setTemporaryPath(path);
                list.add(accessoryQueryExt);
            }
            return R.success().put("list",list);
        }
        return R.fail();
    }

上传的实现类

    @Transactional(rollbackFor = Exception.class)
    @Override
    public R uploadFile(MultipartFile file,String filePath) throws IOException{
        // 判断文件是否为空
        if(file.isEmpty()){
            return R.fail().setMessage("file is empty");
        }
        String fileName = file.getOriginalFilename();
        // 获取文件名后缀
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        // 附件重命名 = 生成32位随机码 + 源文件