springboot + vue+elementUI图片上传流程

news2025/2/28 23:57:24

1.实现背景

前端上传一张图片，存到后端数据库，并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、

2.前端页面

在这里插入图片描述

<el-upload
   class="upload-demo"
   action="http://xxxx.xxx.xxx:9090/file/upload" 
   :show-file-list="false"
   multiple
   :limit="3"
   :on-success="handleAvatarSuccess1"
   >
   	 <img v-if="package1" :src="package1" class="avatar" alt="">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

点击上传后，将图片发送到action后面的接口，之后后端返回图片，回显到img标签。

接口实现

前提：SQL已有一张image表：
在这里插入图片描述

application.yml文件中配置图片存储的位置

files:
  upload:
    path: /www/nndemo/sb/ #这里是服务器的文件位置，如果是本地项目，改成某磁盘某文件夹即可

接口实现：

package com.tt.springboot.controller;


import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import com.tt.springboot.entity.Images;
import com.tt.springboot.mapper.FileMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;

/**
 * @author TT
 * @date 2023-10-26 14:47:13
 * @description 文件上传下载接口
 * @parms file 前端传递过来的文件
 */

@RestController
@RequestMapping("/file")
public class FileController {

    @Autowired
    FileMapper fileMapper;

    @Value("${files.upload.path}")
    private String fileUploadPath; //图片最终存储的位置

    @PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename(); //原始名称
        String type = FileUtil.extName(originalFilename);//文件类型
        long size = file.getSize(); //大小
        //存储到磁盘
        File uploadParentFile = new File(fileUploadPath);
        if (!uploadParentFile.exists()){ //文件目录是否存在
            uploadParentFile.mkdirs();
        }
        //定义一个文件唯一标识码
        String uuid = IdUtil.fastSimpleUUID();
        String fileUuid = uuid + StrUtil.DOT + type;
        File uploadFile = new File(fileUploadPath + fileUuid);
        //把获取到的文件存储到磁盘中去
        file.transferTo(uploadFile);
        //存储到数据库
        String url = "http://xxxx.xxxx.xxx:9090/file/" + fileUuid;
        Images saveFiles = new Images();
        saveFiles.setName(originalFilename);
        saveFiles.setSize(size);
        saveFiles.setType(type);
        saveFiles.setUrl(url);
        fileMapper.saveFile(saveFiles); // 存入数据库，这里项目比较简单，没有三层架构
        return url;
    }

    @GetMapping("/{fileUUID}")
    public void download( HttpServletResponse response, @PathVariable String fileUUID) throws IOException {
        File uploadFile = new File(fileUploadPath + fileUUID);
        ServletOutputStream outputStream = response.getOutputStream();
        response.setHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode(fileUUID,"UTF-8"));
        response.setContentType("application/octet-stream");
        outputStream.write(FileUtil.readBytes(uploadFile));
        outputStream.flush();;
        outputStream.close();
    }
}

fillMapper实现：

@Mapper
public interface FileMapper {
    @Insert("insert into images(name,size,type,url) values (#{name},#{size},#{type},#{url})")
    void saveFile(Images files);
}