如何使用springboot+vue3上传本地图片到网页显示

1. 在前端页面中，使用Vue组件上传图片，可以使用Vue-Upload-Component插件。

2. 在后端Spring Boot中，将上传的图片保存在本地磁盘中，可以使用Spring Boot的MultipartFile接口。

3. 在前端页面中，将上传的图片显示在网页中，可以使用Vue.js的v-bind指令和img标签。

具体步骤如下：

1. 在前端页面中，安装并引入Vue-Upload-Component插件。

npm install vue-upload-component --save

2. 在Vue组件中使用Vue-Upload-Component插件，设置上传的URL和参数。如下：

<template>
  <div>
    <vue-upload-component
      :url="uploadUrl"
      :params="uploadParams"
      @upload-success="onUploadSuccess"
    >
      <button>Upload</button>
    </vue-upload-component>
  </div>
</template>

<script>
  import VueUploadComponent from 'vue-upload-component';

  export default {
    components: { VueUploadComponent },
    data() {
      return {
        uploadUrl: '/api/upload',
        uploadParams: { },
      };
    },
    methods: {
      onUploadSuccess(response) {
        // handle success
      },
    },
  };
</script>

3. 在Spring Boot中，使用MultipartFile接口处理上传的文件，保存到本地磁盘中。如下：

@RestController
@RequestMapping("/api")
public class FileUploadController {

  @PostMapping("/upload")
  public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
    try {
      // Save file to local disk
      String filename = StringUtils.cleanPath(file.getOriginalFilename());
      Path filePath = Paths.get("uploads").resolve(filename);
      Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);

      return ResponseEntity.ok("File uploaded successfully!");
    } catch (IOException ex) {
      return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file!");
    }
  }
}

4. 在前端页面中，使用v-bind指令将上传的图片显示在img标签中。如下：

<template>
  <div>
    <vue-upload-component
      :url="uploadUrl"
      :params="uploadParams"
      @upload-success="onUploadSuccess"
    >
      <button>Upload</button>
    </vue-upload-component>
    <img :src="imageUrl" />
  </div>
</template>

<script>
  import VueUploadComponent from 'vue-upload-component';

  export default {
    components: { VueUploadComponent },
    data() {
      return {
        uploadUrl: '/api/upload',
        uploadParams: { },
        imageUrl: '',
      };
    },
    methods: {
      onUploadSuccess(response) {
        this.imageUrl = response.data.url;
      },
    },
  };
</script>

其中，imageUrl是一个data属性，用来保存上传的图片在服务器上的URL。在onUploadSuccess方法中，将上传成功后返回的URL赋值给imageUrl，然后使用v-bind指令将imageUrl绑定到img标签的src属性上，即可在网页中显示上传的图片。