springboot + vue+elementUI实现图片上传功能
作者:BestArsenaI
文章描述了如何使用Element UI的el-upload组件实现前端图片上传,并将图片存储到后端数据库,同时在页面上回显上传的图片,后端通过接口接收图片,并将其存储在指定位置,然后返回图片路径以便在前端显示,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧
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标签。
3.接口实现
前提: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);
}到此这篇关于springboot + vue+elementUI实现图片上传功能的文章就介绍到这了,更多相关springboot vue图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- 使用Springboot+Vue实现文件上传和下载功能
- 基于SpringBoot和Vue实现头像上传与回显功能
- Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法
- springboot+vue实现阿里云oss大文件分片上传的示例代码
- Java实现大文件的分片上传与下载(springboot+vue3)
- springboot整合vue2-uploader实现文件分片上传、秒传、断点续传功能
- 利用Springboot+vue实现图片上传至数据库并显示的全过程
- Vue+Element+Springboot图片上传的实现示例
- Springboot+Vue-Cropper实现头像剪切上传效果
