SpringBoot之——文件上传及回显

本文介绍了在SpringBoot项目中实现文件上传和回显的步骤。通过配置yml设置上传路径和大小限制,利用MultipartFile进行文件上传,遵循避免使用原文件名、有序保存目录等最佳实践。在Controller和Service层编写代码处理上传,并返回虚拟路径。最后,通过配置文件映射实现文件回显,也可借助Nginx代理达到相同效果。
摘要由CSDN通过智能技术生成

很多项目都需要上传文件,特别是图片,那么,如何方便快捷的实现文件的上传和回显呢?Spring为我们提供了MultipartFile类,方便又好用
一、添加yml配置
yml配置中主要是指定文件上传的路径,大小的限制等方面,配置如下:

spring:    
#图片上传
#启用图片上传功能
  servlet:
    multipart:
      enabled: true
      #上传路径
      location: D://upload
#指定上传文件大小
      max-file-size: 1Mb
      #指定最大允许请求的大小
      max-request-size: 10Mb

因为是spring提供的功能所以我们不需要依赖第三方jar包,直接配置上了就可以使用,非常的简单易用
二、实现文件上传
实现的思路很简单,和我们的日常写的mvc项目一样,只需要在Controller层方法中注入MultipartFile对象,接下来使用MultipartFile对象具体操作上传的方法就可以了,在上传文件的时候有如下建议:
1、不使用原文件名,用一个不重复的字符串表示上传后的文件名(如UUID或者当前时间的毫秒值+随机数都可以)
2、保存图片的文件夹命名要有规律性,方便维护和查找(如当前日期)
3、如果是指定的上传图片或者某种格式的文件需要在方法中做验证,防止木马共计(在这里的例子满足通用文件上传就不验证了)代码如下:
controller层:

package com.wwy.test.upload;

import org.springframework.beans.factory.annotation.Autowired;
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 com.wwy.entry.APIEntry;
import com.wwy.test.upload.service.UpLoadService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

后端代码实现: 1.引入相关依赖 ```xml <!-- 文件上传 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> ``` 2.配置文件上传相关信息 ```yaml # 文件上传限制 spring.servlet.multipart.max-file-size=10MB spring.servlet.multipart.max-request-size=10MB spring.servlet.multipart.enabled=true ``` 3.编写文件上传接口 ```java @RestController @RequestMapping("/api/file") public class FileController { @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException { if (file.isEmpty()) { return "文件为空"; } String fileName = file.getOriginalFilename(); String filePath = "D:\\temp\\"; File dest = new File(filePath + fileName); file.transferTo(dest); return "上传成功"; } } ``` 前端代码实现: 1.安装 axios 和 element-ui ```bash npm install axios element-ui --save ``` 2.编写文件上传组件 ```vue <template> <div> <el-upload class="upload-demo" action="/api/file/upload" :auto-upload="false" :on-change="handleChange" > <el-button slot="trigger" type="primary">选取文件</el-button> <el-button v-if="imageUrl" type="success" @click="handleUpload">上传到服务器</el-button> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过10MB</div> </el-upload> <img v-if="imageUrl" :src="imageUrl" style="max-width: 100%;"> </div> </template> <script> import axios from 'axios'; import { Message } from 'element-ui'; export default { data() { return { imageUrl: '', file: null, }; }, methods: { handleChange(file) { this.file = file.raw; this.imageUrl = URL.createObjectURL(this.file); }, handleUpload() { const formData = new FormData(); formData.append('file', this.file); axios.post('/api/file/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }).then(() => { Message.success('上传成功'); }).catch(() => { Message.error('上传失败'); }); }, }, }; </script> ``` 至此,图片上传及回显的代码实现就完成了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值