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

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

该回答内容部分引用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);
}

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

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇博客也许可以解决你的问题👉 ：vue+springboot实现图片的上传及回显失败问题的解决
• 除此之外, 这篇博客: Springboot+Vue实现将图片和表单一起提交到后端，同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面中的 5.1、图片显示在选择框中，同时返回后端存储的地址 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

        //图片回显
        handleAvatarSuccess(res, file) {
          console.log(res)
          this.imageUrl = res.data.final_fileName
          sessionStorage.setItem("imgUrl",this.imageUrl)
          alert(this.imageUrl)
        },
       //图片上传大小限制
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isLt2M;
        },
  

  解释：
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^