给我写一个SpringBoot+Vue 实现头像和基础信息一起上传，前端传入头像为数组类型

好的，下面是一个简单的SpringBoot+Vue实现头像和基础信息一起上传的示例代码，其中前端传入头像为数组类型：

前端代码（Vue）：

<template>
  <div>
    <input type="file" multiple v-on:change="onFileChange">
    <form>
      <input type="text" v-model="name">
      <button v-on:click="submitForm">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      files: [],
      name: ''
    }
  },
  methods: {
    onFileChange(event) {
      this.files = Array.from(event.target.files)
    },
    submitForm() {
      const formData = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        formData.append('avatar', this.files[i])
      }
      formData.append('name', this.name)
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

后端代码（SpringBoot）：

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

  @PostMapping("/upload")
  public String upload(@RequestParam("avatar") List<MultipartFile> avatars,
                       @RequestParam("name") String name) {
    // 保存头像文件到服务器本地
    for (MultipartFile avatar : avatars) {
      try {
        byte[] bytes = avatar.getBytes();
        Path path = Paths.get("/path/to/save/" + avatar.getOriginalFilename());
        Files.write(path, bytes);
      } catch (IOException e) {
        e.printStackTrace();
      }
    }
    // 保存基础信息到数据库
    // ...
    return "success";
  }
}

在上面的示例中，前端使用input标签来选择头像文件，并使用FormData对象来添加表单数据和文件数据。由于前端传入的头像为数组类型，所以我们使用for循环来遍历头像文件，并将每个头像文件都添加到FormData对象中。后端使用@RequestParam注解来接收前端传递的头像文件数据和基础信息数据。由于前端传入的头像为数组类型，所以我们使用List<MultipartFile>来接收头像文件数据。在上传成功后，我们可以将头像文件保存到服务器本地，并将基础信息保存到数据库中。