vue+element+springboot实现多张图片上传

在Vue和Spring Boot结合的项目中实现多张图片上传，你可以使用Vue的Element UI组件库中的<el-upload>组件来实现前端部分，并在Spring Boot中使用MultipartFile数组来接收上传的图片。

前端代码（Vue + Element UI）:

<template>
  <el-upload
    action="http://localhost:8080/upload"
    list-type="picture-card"
    multiple
    :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）:

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;
 
@RestController
public class UploadController {
 
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile[] files) {
        // 实现文件上传的业务逻辑
        // 例如保存文件到服务器或数据库
        return "Files uploaded successfully.";
    }
}

确保你的Spring Boot应用配置了multipart文件上传的支持，在application.properties或application.yml中设置：

spring.servlet.multipart.max-file-size=128KB
spring.servlet.multipart.max-request-size=128KB

以上代码实现了在Vue前端使用Element UI的<el-upload>组件上传多张图片，并在Spring Boot后端使用@RequestParam("file") MultipartFile[] files接收上传的文件数组。记得根据实际情况调整上传文件的大小限制和服务器地址。