前后端 实现文件上传及下载 进度显示

前端代码简单示例 (vue)

<div>
      <input @change="files" type="file" multiple>
      <button @click="uploadFiles">上传</button>
      <ul>
        <li v-for="item in fileList" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
      <p>上传进度: {{ uploadProgress }}%</p>
      <progress max="100" :value="uploadProgress"></progress>
    </div>
  </div>

<script setup>
import axios from "axios";
import {ref} from "vue";

//存储上传列表
const fileList = ref([])

// 上传文件的回调函数 <input @change="files" type="file" multiple>
const files = (e) => {
  fileList.value = Array.from(e.target.files);
}

// 全部文件整体的上传进度
const uploadProgress = ref(0)

// 上传文件的点击事件 <button @click="uploadFiles">上传</button>
const uploadFiles = () => {

// FormData格式
  const formData = new FormData();
  fileList.value.forEach(file => {
    formData.append('files', file);
  });

// 请更换在自己的URL
  axios.post("http://localhost:8080/user/upload", formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
//文件上传进度的回调函数
        onUploadProgress: (progressEvent) => {
          uploadProgress.value = 
                                Math.round((progressEvent.loaded * 100) /
                                progressEvent.total);
        }
      }
  ).then(res => {
    console.log(res)

    //上传完成进度归零
    //uploadProgress.value = 0;
  }).catch(error => {
    console.error(error)
  })
}

后端代码简单示例 (springboot)

// 使用了hutool,在pom.xml中引入依赖,并重新加载maven项目

 <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.8.25</version>
 </dependency>

Hutool🍬一个功能丰富且易用的Java工具库，涵盖了字符串、数字、集合、编码、日期、文件、IO、加密、数据库JDBC、JSON、HTTP客户端等功能。https://hutool.cn/链接中有更多关于Hutool的使用。

 简单的Result供参考

package com.zp.base.model.vo;

import lombok.Data;

@Data
public class Result {
    private int code;
    private String msg;
    private Object data;

    public static Result success(Object data) {
        Result result = new Result();
        result.setCode(1);
        result.setMsg("成功");
        result.setData(data);
        return result;
    }

    public static Result error(Object data) {
        Result result = new Result();
        result.setCode(0);
        result.setMsg("失败");
        result.setData(data);
        return result;
    }
}

 

package com.zp.base.controller;

import cn.hutool.core.io.FileUtil;

import com.zp.base.model.vo.Result;
import jakarta.servlet.ServletOutputStream;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;

@RestController
@RequestMapping("/user")
public class UserController {
    
    @PostMapping("/upload")
    public Result upload(List<MultipartFile> files) {

        // 文件存储路径
        String savePath = System.getProperty("user.dir") + "\\files";

        // 判断文件夹savePath是否存在，不存在则创建该文件夹。
        // 注意这里的 FileUtil 来自 import cn.hutool.core.io.FileUtil; 莫引入错了。
        if (!FileUtil.isDirectory(savePath)) {
            FileUtil.mkdir(savePath);
        }

        Map<String, String> map = new HashMap<>();

        try {

            if (files == null || files.isEmpty()) {

                return Result.error("请上传文件");
            }

            for (MultipartFile file : files) {

                //生成文件名 将 uuIDFileName 存到数据库即可，这方面就略过了。
                String uuIDFileName = UUID.randomUUID()+"_"+file.getOriginalFilename();

                FileUtil.writeBytes(file.getBytes(), savePath + "\\" + uuIDFileName);

           
               map.put(uuIDFileName,"http://localhost:8080/user/download/"+uuIDFileName);
            }
            return Result.success(map);

        } catch (Exception e) {

            return Result.error(e);
        }
    }

    @GetMapping("/download/{fileName}")
    public Result download(@PathVariable String fileName, HttpServletResponse response){

        String savePath = System.getProperty("user.dir") + "\\files";

        String pathFileName = savePath + "\\" + fileName;

        if (!FileUtil.isDirectory(savePath) && !FileUtil.exist(pathFileName)) {

            return Result.error("文件不存在！");
        }

        try {

            byte[] bytes = FileUtil.readBytes(pathFileName);

            ServletOutputStream OutputStream = response.getOutputStream();

            OutputStream.write(bytes);

            OutputStream.flush();

            OutputStream.close();

            return Result.success("成功");

        } catch (IOException e) {

            return Result.error(e);
        }
    }
}