【SpringBoot+Vue】前后端分离项目之图片上传与下载

一、图片上传

前端：

<template>
    <el-upload
        class="avatar-uploader"
        action="http://localhost:8080/common/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        ref="upload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon">i>
    el-upload>
template>
 
<script>
    export default{
        data(){
            return{
                imageUrl:''
            }
        },
        methods:{
            handleAvatarSuccess (resp) {
                //这里的路径要配合上后端的Controller
                this.imageUrl = `http://localhost:8080/common/download?name=${resp}`
            },
            beforeAvatarUpload(file) {
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isPNG) {
                  this.$message.error('上传头像图片只能是 PNG 格式!');
                }    
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isPNG && isLt2M;
            }
        }
    }
script>
 
<style>
.avatar-uploader .el-upload {
  border: dashed 2px #d8dde3 !important;
  border-radius: 4px !important;
  background: #fcfcfc;
}
.avatar-uploader .avatar-uploader-icon {
  background: #fcfcfc;
}
.avatar-uploader .el-icon-plus:before {
  content: "上传图片" !important;
  font-size: 12px;
  color: #000;
}
style>

后端：

@RestController
@RequestMapping("/common")
public class FileController {
 
    @Value("${hong.path}")
    private String basePath;
 
    @PostMapping("/upload")
    public String upload(MultipartFile file){
        //原始文件名
        String originalFilename = file.getOriginalFilename();//xxx.png
        //对原始名进行截取"."后面的字符
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));//.png
        //使用UUID重新生成文件名，防止文件名称重复造成文件覆盖
        String fileName = UUID.randomUUID().toString() + suffix;
        //创建一个目录对象
        File dir = new File(basePath);
        //判断当前目录是否存在：目录不存在，需要创建
        if(!dir.exists()) dir.mkdirs();
        try {
            //将临时文件转存到指定位置
            file.transferTo(new File(basePath + fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return fileName;
    }
}

在yml中配置路径如下（可自行修改）：
 
hong:
    path : C:\images\

二、图片显示/下载

前端：

<template>
    
    <el-table-column prop="image" label="图片" width="180" align="center">
        <template slot-scope="{ row }">
            <el-image
              style="height:80"
              :src="getImgUrl(row.image)"
            >
            el-image>
        template>
    el-table-column>
template>
 
<script>
    export default{
        methods:{
            getImgUrl(img) {
                //这里的路径注意自己的后端Controller路径
                return `http://localhost:8080/common/download?name=${img}`
            }
        }
    }
script>
 
<style>
 
style>

后端：

@GetMapping("/download")
public void download(String name, HttpServletResponse response){
    try {
        //输入流，通过输入流读取文件内容
        FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));
        //输出流，通过输出流将文件写回浏览器
        ServletOutputStream outputStream = response.getOutputStream();
        response.setContentType("image/png");
        int len = 0;
        byte[] bytes = new byte[1024];
        while ((len = fileInputStream.read(bytes)) != -1){
            outputStream.write(bytes,0,len);
        }
        outputStream.flush();
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        if(fileInputStream != null){
            try {
                fileInputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        if(outputStream != null){
            try {
                outputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}