vue springboot 如何上传头像、图片墙？

Question

vue springboot 上传头像、图片墙？
这怎么上传图片，干脆特地写一个独立的后端方法，然后在各个需要使用上传文件的时候再调用这个方法可以吗？目前需要的有上传头像，上传店铺景点等的图片，请问要怎么写啊？后端的。。之前写了一个，结果界面不显示图片，图片裂开了，好像没下载下来，不会写了。

Answer 1

该回答内容部分引用GPT，GPT_Pro更好的解决问题
上传头像和图片墙这种，在前后端分离的系统中是一个比较常见的需求，其实也不难实现。首先，前端使用Vue+ElementUI来实现，可以使用ElementUI提供的上传组件来进行文件上传，具体代码如下：

<el-upload
  action="upload.php"
  list-type="picture-card"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList">
  <i class="el-icon-plus"></i>
</el-upload>

然后再后端，我们可以使用SpringBoot来实现上传图片的功能，具体代码如下：

@PostMapping("/upload")
public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) {
    String fileName = fileStorageService.storeFile(file);

    String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
                              .path("/downloadFile/")
                              .path(fileName)
                              .toUriString();

    return new ResponseEntity<>(new UploadFileResponse(fileName, fileDownloadUri), HttpStatus.OK);
}

如果回答有帮助，望采纳。