当前位置：首页 > news >正文

springboot + vue+elementUI图片上传流程

news 2025/7/16 18:23:13

1.实现背景

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

2.前端页面

在这里插入图片描述

<el-uploadclass="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 {@AutowiredFileMapper 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);
}