springboot+vue+elementui表单包含上传图片

### 创建支持图片上传的表单 #### 后端配置（Spring Boot） 为了实现图片上传，在 Spring Boot 中需要设置 `MultipartConfig` 和相应的控制器来处理文件上传请求。 ```java @RestController @RequestMapping("/api/upload") public class FileUploadController { @PostMapping("/image") public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file) { try { // 处理文件保存逻辑... String filePath = saveFile(file); return new ResponseEntity<>("{\"status\":\"success\",\"message\":\"Upload successful\",\"path\":\"" + filePath + "\"}", HttpStatus.OK); } catch (Exception e) { return new ResponseEntity<>(HttpStatus.BAD_REQUEST); } } private String saveFile(MultipartFile file) throws IOException { byte[] bytes = file.getBytes(); Path path = Paths.get("uploads/" + file.getOriginalFilename()); Files.write(path, bytes); return "/uploads/" + file.getOriginalFilename(); // 返回相对路径或绝对路径 } } ``` 此代码片段展示了如何接收来自客户端的多部分文件并将其存储在服务器上[^1]。 #### 前端配置（Vue.js with Element UI） 对于前端部分，使用 Element UI 的 `<el-upload>` 组件可以方便地构建一个用于选择和预览图像的界面。下面是一个简单的例子： ```html <template> <div> <!-- 图片上传 --> <el-upload action="/api/upload/image" list-type="picture-card" :on-success="handleSuccess" :before-upload="beforeAvatarUpload"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> <i class="el-icon-download"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> <!-- 预览对话框 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> <script> export default { data() { return { dialogImageUrl: '', dialogVisible: false, disabled: false }; }, methods: { handleSuccess(response, file, fileList){ console.log('upload success', response.data.path); // 获取返回的数据中的路径信息 }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleRemove(file, fileList) {}, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleDownload(file) {} } }; </script> ``` 这段代码实现了基本的图片上传功能，并允许用户查看已上传的照片缩略图以及删除操作。当成功上传时会触发 `handleSuccess` 方法，该方法可以根据实际需求进一步处理响应数据[^2]。