SpringBoot+Vue+ElementUi多文件上传(前后端代码)
以下是一个简化的Spring Boot后端代码示例,用于处理Vue.js前端发送的多文件上传请求。
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.util.List;
@RestController
public class FileUploadController {
@PostMapping("/uploadMultipleFiles")
public String uploadMultipleFiles(@RequestParam("files") List<MultipartFile> files) {
// 实现文件保存的逻辑
files.forEach(file -> {
// 获取文件名
String filename = file.getOriginalFilename();
// 保存文件到服务器的逻辑
// ...
});
return "文件上传成功";
}
}
前端Vue.js和Element UI代码示例:
<template>
<el-upload
action="http://localhost:8080/uploadMultipleFiles"
list-type="text"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
// Vue组件的其他部分
};
</script>
确保后端服务器运行在http://localhost:8080
,并且Vue开发服务器运行在不同的端口上。在实际部署中,你需要根据实际的后端服务地址来更改action
属性的值。
评论已关闭