SpringBoot中如何上传Upload

上传:
马克-to-win@马克java社区:根据第3部分的helloworld例子,用那个项目做底子。pom.xml都不用改变。参考项目bootUpload1. 

static/index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
index1


<form method="POST" action="/upload" enctype="multipart/form-data">
    <input type="file" name="file" /><br/><br/>
    <input type="submit" value="Submit" />
</form>
</body>
</html>


package com.SpringbootMaven;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javax.servlet.http.HttpServletResponse;

@Controller
public class UploadController {
    private static String UPLOADED_FOLDER = "e://temp//";

    @RequestMapping("/upload") 
    public void singleFileUpload(@RequestParam("file") MultipartFile file,HttpServletResponse res) throws IOException {
        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);
            System.out.println("马克-to-win@马克java社区 successfully");
        } catch (IOException e) {
            e.printStackTrace();
        }
        res.sendRedirect("index.html");
    }
}

更多请看下节:https://blog.youkuaiyun.com/qq_44639795/article/details/90239506

实现多文件上传的方式有很多种,下面我将介绍一种基于 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
发出的红包

打赏作者

mark_to_win

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值