在Vue和Spring Boot结合的项目中实现图片上传，可以使用Vue的<el-upload>组件进行前端操作，Spring Boot提供接口来处理文件保存。
前端（Vue）:
- 使用
<el-upload>组件来上传图片。 - 设置
action属性为后端API接口的URL。 - 设置
on-success事件处理函数来处理上传成功后的逻辑。
<template>
<el-upload
action="http://localhost:8080/api/upload"
list-type="picture-card"
:on-success="handleSuccess"
:on-error="handleError"
>
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
console.log('File uploaded successfully:', response);
},
handleError(err, file, fileList) {
console.error('Error during upload:', err);
}
}
}
</script>后端（Spring Boot）:
- 创建一个控制器来处理文件上传的HTTP POST请求。
- 使用
MultipartFile接收上传的文件。 - 将文件保存到服务器的指定目录。
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
@RestController
public class FileUploadController {
@PostMapping("/api/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "File is empty";
}
try {
byte[] bytes = file.getBytes();
Path path = Paths.get("uploads/" + file.getOriginalFilename());
File uploadDir = new File("uploads");
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
Files.write(path, bytes);
return "File uploaded successfully: " + file.getOriginalFilename();
} catch (IOException e) {
e.printStackTrace();
return "File upload failed: " + e.getMessage();
}
}
}确保服务器的uploads目录存在，并且Spring Boot应用有足够的权限来写入该目录。
以上代码提供了图片上传的前后端实现，并处理了文件的接收和保存。在实际应用中，你可能需要添加更多的安全措施，例如验证上传的文件类型、大小，或者使用云服务存储上传的图片。