Vue+elementUI+SpringBoot项目-上传用户头像

在Vue+ElementUI+SpringBoot项目中，上传用户头像的步骤如下：

在Vue组件中，创建一个input标签用于选择文件：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" />
    <button @click="uploadAvatar">上传头像</button>
  </div>
</template>

在Vue组件的methods中，定义handleFileChange方法来处理文件选择事件：

methods: {
  handleFileChange(e) {
    this.avatarFile = e.target.files[0];
  },
  async uploadAvatar() {
    const formData = new FormData();
    formData.append('avatar', this.avatarFile);

    try {
      await axios.post('/api/upload-avatar', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      // 上传成功后的处理逻辑
    } catch (error) {
      // 上传失败后的处理逻辑
    }
  }
}

在Spring Boot中创建一个Controller来处理文件上传请求：

@RestController
@RequestMapping("/api")
public class AvatarController {
  
  @PostMapping("/upload-avatar")
  public ResponseEntity<?> uploadAvatar(@RequestParam("avatar") MultipartFile avatarFile) {
    try {
      // 处理上传逻辑
      // 保存文件到服务器或者存储到数据库中
      // 返回上传成功的响应
      return ResponseEntity.ok().body("上传成功");
    } catch (Exception e) {
      // 处理上传失败的逻辑
      // 返回上传失败的响应
      return ResponseEntity.badRequest().body("上传失败");
    }
  }
}

配置CORS（跨域资源共享）以允许从Vue前端访问Spring Boot后端的上传接口。在Spring Boot的配置类中添加以下代码：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedMethods("*")
        .allowedOrigins("*")
        .allowedHeaders("*");
  }
}

以上就是在Vue+ElementUI+SpringBoot项目中上传用户头像的步骤。需要注意的是，示例代码中的上传逻辑仅供参考，具体的实现方式可以根据项目需求进行调整