Avue中图片上传怎么做包括后端使用springboot加mybatisplus实现

Avue 中的图片上传，可以通过 `avue-upload` 组件来实现。示例代码如下：

<template>
  <div>
    <avue-upload
      label="上传图片"
      :action="uploadUrl"
      :headers="{ Authorization: 'Bearer ' + localStorage.getItem('token') }"
      :data="{ type: 'avatar' }"
      :multiple="false"
      :show-upload-list="false"
      :on-success="handleSuccess"
    >
      <img v-if="imageUrl" :src="imageUrl" style="max-width: 100%" />
      <div v-else style="width: 200px; height: 200px; border: 1px solid #ccc; text-align: center; line-height: 200px;">
        点击上传图片
      </div>
    </avue-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      uploadUrl: '/api/upload'
    }
  },
  methods: {
    handleSuccess(response) {
      if (response.code === 0) {
        this.imageUrl = response.data.url;
      } else {
        this.$message.error(response.message);
      }
    }
  }
}
</script>

在上面的代码中，我们使用了 `avue-upload` 组件来实现图片上传，并将上传的图片地址保存到了 `imageUrl` 变量中。其中：

- `action` 属性指定了上传文件的地址；
- `headers` 属性指定了请求头；
- `data` 属性指定了上传文件的额外参数，例如这里的 `type: 'avatar'`。

需要注意的是，上传图片的后端接口需要根据实际情况进行开发，这里只是一个示例。

下面是使用 Spring Boot 和 MyBatis Plus 实现图片上传和保存地址的示例代码：

@RestController
@RequestMapping("/api")
public class ImageController {
    
    @Autowired
    private ImageService imageService;
    
    @PostMapping("/upload")
    public Result upload(@RequestParam("file") MultipartFile file) throws IOException {
        if (file.isEmpty()) {
            return Result.error("上传文件不能为空");
        }
        String fileName = file.getOriginalFilename();
        String contentType = file.getContentType();
        long size = file.getSize();
        String filePath = "uploads/" + UUID.randomUUID().toString() + getFileExtension(fileName);
        File dest = new File(filePath);
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        file.transferTo(dest);
        Image image = new Image();
        image.setName(fileName);
        image.setPath(filePath);
        image.setSize(size);
        image.setType(contentType);
        imageService.save(image);
        String url = "/api/image/" + image.getId();
        return Result.success("上传成功", new HashMap<String, Object>() {{
            put("url", url);
        }});
    }
    
    @GetMapping("/image/{id}")
    public ResponseEntity<Resource> getImage(@PathVariable Long id) throws IOException {
        Image image = imageService.getById(id);
        if (image == null) {
            return ResponseEntity.notFound().build();
        }
        Path path = Paths.get(image.getPath());
        ByteArrayResource resource = new ByteArrayResource(Files.readAllBytes(path));
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + image.getName() + "\"")
                .contentLength(image.getSize())
                .contentType(MediaType.parseMediaType(image.getType()))
                .body(resource);
    }
    
    private String getFileExtension(String fileName) {
        int index = fileName.lastIndexOf(".");
        if (index == -1) {
            return "";
        }
        return fileName.substring(index);
    }
}

在上面的代码中，我们使用了 Spring Boot 和 MyBatis Plus 来实现图片上传和保存地址。其中：

- `upload` 方法处理了上传图片的请求，将图片保存到本地磁盘的 `uploads` 目录下，并将图片的地址信息保存到 MySQL 数据库中；
- `getImage` 方法处理了获取图片的请求，根据图片的 ID 从数据库中获取图片的地址信息，并通过 `ResponseEntity` 返回图片的二进制数据。

需要注意的是，这里的示例代码只是一个简单的实现，生产环境中需要根据实际情况进行优化和改进，例如加入图片的压缩、水印等功能。