vue+elementui+springboot图片上传

在Vue和Spring Boot结合的项目中实现图片上传，可以使用Vue的<el-upload>组件进行前端操作，Spring Boot提供接口来处理文件保存。

前端（Vue）:

1. 使用<el-upload>组件来上传图片。
2. 设置action属性为后端API接口的URL。
3. 设置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）:

1. 创建一个控制器来处理文件上传的HTTP POST请求。
2. 使用MultipartFile接收上传的文件。
3. 将文件保存到服务器的指定目录。

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应用有足够的权限来写入该目录。

以上代码提供了图片上传的前后端实现，并处理了文件的接收和保存。在实际应用中，你可能需要添加更多的安全措施，例如验证上传的文件类型、大小，或者使用云服务存储上传的图片。