spring boot文件的上传和下载后端的实现

文件上传

文件上传，也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。

文件上传对form表单的要求如下：

表单属性	取值	说明
method	post	必须选择post方式提交
enctype	multipart/form-data	采用multipart格式上传文件
input的type	file	使用input的file控件上传

前端介绍

1.简单html页面

<form method="post" action="/common/upload" enctype="multipart/form-data">
    <input name="myFile" type="file"  />
    <input type="submit" value="提交" /> 
</form>

2.ElementUI中提供的upload上传组件

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

服务端介绍

服务端要接收客户端页面上传的文件，通常都会使用Apache的两个组件：

• commons-fileupload

• commons-io

而Springboot框架在spring-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controller的方法中声明一个MultipartFile类型的参数即可接收上传的文件，例如：

/**
 * 文件上传
 * @param file
 * @return
 */
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
    System.out.println(file);
    return R.success(fileName);
}

后端代码的实现

代码实现步骤

1. 获取文件的原始文件名, 通过原始文件名获取文件后缀

2. 通过UUID重新声明文件名, 文件名称重复造成文件覆盖

3. 创建文件存放目录

4. 将上传的临时文件转存到指定位置

    /**
     * 文件上传
     * @param file
     * @return
     */    
    @Value("${reggie.path}")
    String imgDir; //文件的存储路径
    @PostMapping("/upload")  //请求路径
    public Result upload(MultipartFile file/*方法形参的名称需要与页面的file域的name属性一致*/) throws IOException {
        //1.判断图片目录是否存在,若不存在则创建
        File dirFile = new File(imgDir);
        if (FileUtil.exist(dirFile)) {
            dirFile.mkdir();
        }

        //2.获取到文件的名称 
        String filename = file.getOriginalFilename();
        //2.1 为了避免同名文件覆盖的问题,给文件名整一个唯一值
        filename = IdUtil.fastUUID() + "." + FileUtil.extName(filename);

        //3.将文件保存到图片目录
        file.transferTo(new File(imgDir + filename));

        //4.返回R.success(文件的名称);
        return R.success(filename);
        
    }

文件下载

文件下载，也称为download，是指将文件从服务器传输到本地计算机的过程。通过浏览器进行文件下载，通常有两种表现形式：

1. 以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录

response.setHeader("content-disposition","attachment;filename="+文件名称)

2. 直接在浏览器中打开

而我们在今天所需要实现的菜品展示，表现形式为在浏览器中直接打开。

代码实现

代码实现步骤

1. 定义输入流，通过输入流读取文件内容

2. 通过response对象，获取到输出流

3. 通过response对象设置响应数据格式(image/jpeg)

4. 通过输入流读取文件数据，然后通过上述的输出流写回浏览器

5. 关闭资源

    
    @Value("${reggie.path}")
    String imgDir;
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response) throws IOException {
        //1.获取文件的输入流
        FileInputStream is = new FileInputStream(imgDir + name);
        //扩展一下:若要做文件下载,指定一个文件下载头,(告诉浏览器,用附件的形式进行下载)
        //response.setHeader("content-disposition","attachment;filename="+name);

        //2.获取输出流
        ServletOutputStream os = response.getOutputStream();

        //3.流对拷
        IoUtil.copy(is, os);

        //4.释放资源
        is.close();
        os.close();

    }