Java+vue+elementUI实现文件上传下载操作

明确需求：Java+vue+elementUI实现文件上传下载操作

---

一、分析前端请求路径

请求页面效果

 前端代码中请求路径：/common/upload

浏览器中请求地址和负载信息

有图有真相，前端指明请求路径为/common/upload，我们后端编写controller时也是相同的路径去接收请求，之一负载中的信息name="file"这里必须与后端的参数名保持一致。

二、配置上传文件保存路径

在spring的全局配置文件application.yml中指定文件保存位置

三、编写Controller

package com.xiaoma.reggie.controller;

import com.xiaoma.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@Slf4j
@RestController
@RequestMapping("/common")
public class FileUploadController {

    @Value("${reggie.path}")
    private String basePath;

    /**
     * 文件上传
     * spring框架在spring-web包中对文件上传进行了封装，只需要在Controller的方法中声明一个
     * MultipartFile类型的参数即可接收上传的文件
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file){
        //file是一个临时文件，需要转存到指定位置，否则本次请求完成后临时文件会删除
        log.info(file.toString());

        //1.获取原始文件名
        String originalFilename = file.getOriginalFilename();

        //2.将临时文件转储到指定位置
        try {
            file.transferTo(new File(basePath+originalFilename));
        } catch (IOException e) {
            e.printStackTrace();
        }

        //3.返回正确信息
        return R.success("文件上传成功");
    }
}

效果展示

---

 四、上传补充

如果是日常编写demo在上传文件较少的情况下我们使用上面的操作就可以了，但是在实际开发情况下我们需要考虑的更加全面，例如当我们上传的图片名称相同时就会面临后面上传的文件覆盖前面同名文件的问题，为了解决这个问题这里提供使用UUID生成文件名的方法。

基本思路：1.获取上传的文件名 2.截取文件名的后缀(文件格式) 3.使用UUID重新生成文件名 4.拼接成完整的文件名

代码实现：

package com.xiaoma.reggie.controller;

import com.xiaoma.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Slf4j
@RestController
@RequestMapping("/common")
public class FileUploadController {

    @Value("${reggie.path}")
    private String basePath;

    /**
     * 文件上传
     * spring框架在spring-web包中对文件上传进行了封装，只需要在Controller的方法中声明一个
     * MultipartFile类型的参数即可接收上传的文件
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file){
        //file是一个临时文件，需要转存到指定位置，否则本次请求完成后临时文件会删除
        log.info(file.toString());

        //1.获取原始文件名xxx.jpg
        String originalFilename = file.getOriginalFilename();

        //2.截取文件名后缀.jpg
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

        //3.使用UUID重新生成文件名，防止文件名重复造成文件覆盖
        String fileName = UUID.randomUUID().toString()+suffix;

        //4.创建一个目录对象
        File dir = new File(basePath);
        if(!dir.exists()){
            dir.mkdir();
        }

        //5.将临时文件转储到指定位置
        try {
            file.transferTo(new File(basePath+fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }

        //3.返回文件名称
        return R.success(fileName);
    }
}

五、文件下载

前端上传位置指定上传成功执行回调函数handleAvatarSuccess

<el-upload class="avatar-uploader"
    action="/common/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeUpload"
    ref="upload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

下载路径/common/download，拼接参数name

handleAvatarSuccess (response, file, fileList) {
     this.imageUrl = `/common/download?name=${response.data}`
},

下载部分代码：

    /**
     * 文件下载
     * @param name 前端传过来的参数---文件名
     * @param response
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response){
        try {
            //1.输入流，通过输入流读取上传的文件
            FileInputStream fileInputStream = new FileInputStream(new File(basePath+name));
            //2.输出流，通过输出流将文件写回了浏览器，在浏览器展示
            ServletOutputStream outputStream = response.getOutputStream();
            //3.设置相应格式是图片格式
            response.setContentType("image/jpeg");
            //4.将文件读取进bytes数组，通过输出流写回浏览器
            int len = 0;
            byte[] bytes = new byte[1024];
            while ((len = fileInputStream.read(bytes))!=-1){
                outputStream.write(bytes,0,len);
                outputStream.flush();
            }
            //5.关闭资源
            outputStream.close();
            fileInputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

效果展示

 感谢支持，持续更新中...