springboot学习-单个文件上传

SpringBoot上传文件更为简化。

最近挺忙的,但是学习是不能停的,继续更一下

看书学习是一件快乐的事情

首先,还是要创建一个SpringBoot项目,并添加spring-boot-starter-web依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

然后在resource目录下的static目录中创建一个upload.html文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" value="请选择文件">
    <input type="submit" value="上传">
</form>
</body>
</html>

这是一个很简单的文件上传页面,上传接口是/upload,注意请求方法是post,enctype是multipart/form-data.

接着创建文件上传处理接口,FileUploadController 代码如下:

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

@RestController
public class FileUploadController {
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd/");
    @PostMapping("/upload")
    public String upload(MultipartFile uploadFile, HttpServletRequest req){
        String realPath = req.getSession().getServletContext().getRealPath("/uploadFile/");
        String format = sdf.format(new Date());
        File folder = new File(realPath + format);
        if(!folder.isDirectory()){
            folder.mkdirs();
        }
        String oldName = uploadFile.getOriginalFilename();
        String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."),oldName.length());
        try{
            uploadFile.transferTo(new File(folder,newName));
            String filePath = req.getScheme() + "://" + req.getServerName() + ":" +req.getServerPort() + "/uploadFile/" + format + newName;
            return filePath;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "上传失败";
    }
}

最后在浏览器中进行测试:

上传成功后会返回地址

用这个路径就可以看到上传的图片

csdn现在审核严格,微信二维码图片居然无法通过审核

多文件上传

修改upload.html文件

<form action="/uploads" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFiles" value="请选择文件" multiple="multiple">
    <input type="submit" value="上传">
</form>

使用数组实现:

@PostMapping("/uploads")
    public String upload(MultipartFile[] uploadFiles, HttpServletRequest request){


        if (uploadFiles == null || uploadFiles.length < 1) {
            return "文件不能为空";
        }
        //2,定义文件的存储路径,
        String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
        File dir = new File(realPath);
        if (!dir.isDirectory()) {//文件目录不存在,就创建一个
            dir.mkdirs();
        }
        try {
            String filePathS = "";
            //3,遍历文件数组,一个个上传
            for (int i = 0; i < uploadFiles.length; i++) {
                MultipartFile uploadFile = uploadFiles[i];
                String filename = uploadFile.getOriginalFilename();
                //服务端保存的文件对象
                File fileServer = new File(dir, filename);
                System.out.println("file文件真实路径:" + fileServer.getAbsolutePath());
                //2,实现上传
                uploadFile.transferTo(fileServer);
                String filePath = request.getScheme() + "://" +
                        request.getServerName() + ":"
                        + request.getServerPort()
                        + "/uploadFile/" + filename;
                filePathS = filePathS + "\n" + filePath;
            }
            //4,返回可供访问的网络路径
            return filePathS;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "上传失败";
}

 

实现多文件上传的方式有很多种,下面我将介绍一种基于 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、付费专栏及课程。

余额充值