Vue.js POST 文件连同表单数据 Vue + axios

我有一个Vuejs组件的方法:

async submit () {
        if (this.$refs.form.validate()) {
          let formData = new FormData()
          formData.append('userImage', this.avatarFile, this.avatarFile.name)
          this.avatarFile = formData
          try {
            let response = await this.$axios.post('http://localhost:3003/api/test.php', {
              avatar: this.avatarFile,
              name: this.name,
              gender: this.gender,
              dob: this.DOB,
            }, {
              headers: {
                'Content-Type': 'multipart/form-data; boundary=' + formData._boundary
              }
            })
            if (response.status === 200 && response.data.status === 'success') {
              console.log(this.response)
            }
          } catch (e) {
           console.log(e)
          }
        }
      }

在test.php中，我用json_decode(file_get_contents("php://input"), TRUE);来读取$_POST个变量的数据.

虽然我能正确地读name、gender和dob，但我不能正确地读avatar.

有相同的解决方案吗？

注意:我不想把每个变量都追加为formData.append(.., ..)，因为我计划处理超过14个变量.

主持人注意:我没有发现formData与其他数据对象一起使用的任何问题.