SpringBoot实现单个和多个文件上传

SpringBoot开发web项目,有一个MultipartFile接口。继承InputStreamSource,这个接口就是用来处理文件上传和保存。

1.写一个前端上传文件的页面:picUpload.html

<!DOCTYPE HTML>
<html>
<head>
    <title>pictureUploading</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8 ">
</head>
<body>

<form enctype="multipart/form-data" method="post" action="/upload">
    文件:<input type="file" name="fileUpload"/><br/>
    <input type="submit" value="上传"/>
</form>


<form enctype="multipart/form-data" method="post" action="/uploads">
    多个文件:<input type="file" name="file" multiple="multiple"/><br/>
    <input type="submit" value="上传" />
</form>
</body>
</html>

页面放在templates包下面,自己创建一个upload包,用来放上传文件按页面:当然也可以直接放在tempates包下面
在这里插入图片描述
如果访问不到,可以参考一下链接:
SpringBoot如何返回(访问)到template下面的html页面

2.MVC模式下,Controller返回页面:

  @RequestMapping("/picUpload")
    public String picUpload(){
        return "/upload/picUpload.html";
    }

3.处理上传的单个文件:

@PostMapping("/upload")
    @ResponseBody
    public Object upload(MultipartFile fileUpload){
        if(fileUpload.isEmpty()){
            return "文件为空";
        }
        //获取文件名
        String fileName = fileUpload.getOriginalFilename();
        //获取文件后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //指定本地文件夹存储图片
        String filePath = "C:/IDEA/WorkSpace/helloWorld/src/main/resources/upload/";
        try {
            //将图片保存到static文件夹里
            fileUpload.transferTo(new File(filePath+fileName));
            return "上传成功";
        } catch (Exception e) {
            e.printStackTrace();
            return "上传失败";
        }
    }

在这里插入图片描述
箭头处是文件保存的路径:记得最后一个地方+“ / ”,否则只是保存在上一级路径下面。这里的upload文件是我临时建的。

4.处理多个文件上传:

 @PostMapping("/uploads")
    @ResponseBody
    public Object uploads(MultipartFile[] file){
        for(int i=0;i<file.length;i++) {
            MultipartFile fileUpload=file[i];
            //获取文件名
            String fileName = fileUpload.getOriginalFilename();
            //获取文件后缀名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            //指定本地文件夹存储图片
            String filePath = "C:/IDEA/WorkSpace/helloWorld/src/main/resources/upload/";
            try {
                //将图片保存到static文件夹里
                fileUpload.transferTo(new File(filePath + fileName));
            } catch(Exception e) {
                e.printStackTrace();
                return "上传失败";
            }
        }
        return "上传成功";
    }

在这里插入图片描述
箭头这里我用的数组就可以了,也可使用HttpServlet处理。

5.启动项目,输入地址:http://localhost:8080/picUpload 测试:

在这里插入图片描述
点击选择文件,我们选择一张图片测试:
点击上传:返回上传成功,就是上传成功。
在这里插入图片描述
再到项目保存路径下寻找一下上传的文件是否存在:
在这里插入图片描述
表示我们上传成功。
同样的方法测试上传多个即可以了。

6.最后看一下核心类MultipartFile:

接口是在org.springframework.web.multipart.MultipartFile包下面,所以它是Spring-Web包下的,
在这里插入图片描述
接口继承了InputStreamSource

接口InputStreamSource是org.springframework.core.io包下的,看的出来时Spring核心IO包,可以理解为特殊的JAVA中的IO流。打开源码,我们看注解,也可得知:import java.io.IOException;;import java.io.InputStream;
在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现文件上传的方式有很多种,下面我将介绍一种基于 Vue 和 Spring Boot 的实现方式,使用的是 Element UI 的上传组件 el-upload。 前端实现: 1. 在 Vue 组件中引入 Element UI 的 el-upload 组件。 ```vue <template> <el-upload class="upload-demo" action="/api/upload" :multiple="true" :on-change="handleUploadChange" :on-remove="handleUploadRemove" :file-list="fileList"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> ``` 2. 在 Vue 组件中定义 fileList 数组,用于存储上传的文件列表。 ```vue <script> export default { data() { return { fileList: [] } }, methods: { handleUploadChange(file, fileList) { this.fileList = fileList }, handleUploadRemove(file, fileList) { this.fileList = fileList } } } </script> ``` 3. 在 Vue 组件中定义 handleUploadChange 和 handleUploadRemove 方法,用于监听上传文件的变化和删除文件的操作,更新 fileList 数组。 后端实现: 1. 在 Spring Boot 项目中定义上传文件的接口。 ```java @RestController @RequestMapping("/api") public class FileUploadController { @PostMapping("/upload") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile[] files) { // TODO: 处理上传的文件 return ResponseEntity.ok("上传成功"); } } ``` 2. 在接口中使用 @RequestParam 注解接收上传的文件,可以使用 MultipartFile 类型的数组来接收多个文件。接收到文件后,可以根据需要进行处理,例如保存到本地磁盘或上传到云存储服务。 3. 在 application.properties 文件中配置文件上传的相关参数。 ```properties # 文件上传配置 spring.servlet.multipart.max-file-size=500KB spring.servlet.multipart.max-request-size=100MB spring.servlet.multipart.enabled=true ``` 其中,max-file-size 和 max-request-size 分别设置了单个文件和总文件大小的最大值,enabled 表示是否启用文件上传功能。 以上就是基于 Vue 和 Spring Boot 的多文件上传实现方式,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值