文件上传仅适用于 v-for 中的第一个组件

Question

我有一个使用 v-for 显示空缺职位列表的组件，在该组件中有一个 FileUpload 组件，它也被添加到每个列表中。出于某种原因，只有列表中的第一个作业会实际上传文件。

提交文件时，第一个的回复是 json，其中包含所有正确的数据，所有其他列表的回复只是 true。

我还注意到请求有效负载有所不同

第一个列表的请求负载：

------WebKitFormBoundaryYRQqeeEwyNhW5hPy
Content-Disposition: form-data; name="files"; filename="test resume.pdf"
Content-Type: application/pdf

其他列表的请求负载：

------WebKitFormBoundaryCwisfY5DcuxtoI7G
Content-Disposition: form-data; name="files"

null

这是组件（使用 Vuetify 构建）主要成分：

<template>
  <div id="careers-page" >
    <v-container>
      <v-layout row>
        <v-expansion-panel>
          <v-expansion-panel-content  v-for="job in jobs" :key="job._id">
            <div slot="header">
              <span>{{ job.Position }}</span>
            </div>
            <v-card>
              <v-layout row wrap>
                <v-flex xs12 md6>
                  <v-card-text>{{ job.Description }}</v-card-text>
                </v-flex>
                <v-flex xs12 md6>
                  <v-form v-model="valid" ref="form" lazy-validation>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field label="Name" v-model="form.name" />
                      </v-flex>
                    </v-layout>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field label="Email" v-model="form.email" />
                      </v-flex>
                    </v-layout>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field label="Phone" v-model="form.phone" />
                      </v-flex>
                    </v-layout>
                    <v-layout row>
                      <v-flex xs10 offset-xs1>
                        <v-text-field multi-line label="Cover Letter" v-model="form.coverLetter" />
                      </v-flex>
                    </v-layout>
                      <v-layout row wrap align-center>
                        <v-flex xs12 sm4 text-xs-center text-sm-right>
                          <v-btn class="anm-btn bold" @click="submit(job.Position, job._id)" color="ANMsecondary" dark depressed>Submit</v-btn>
                        </v-flex>
                        <v-flex xs12 sm4 text-xs-center text-sm-left>
                          <FileUpload :job="job" ref="uploadFile" />
                        </v-flex>
                      </v-layout>
                  </v-form>
                </v-flex>
              </v-layout>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FileUpload from './FileUpload'

export default {
  components: {
    FileUpload
  },
  data () {
    return {
      form: {
        name: null,
        email: null,
        phone: null,
        coverLetter: ''
      },
      valid: true
    }
  },
  computed: {
    ...mapGetters({
      jobs: 'jobs'
    })
  },
  methods: {
    submit (position, jobId) {
      if (this.$refs.form[0].validate()) {
        this.$store.dispatch('submitApplication', {
          Name: this.form.name,
          Email: this.form.email,
          Phone: this.form.phone,
          Position: position,
          CoverLetter: this.form.coverLetter
        })
        .then((res) => {
          this.$refs.uploadFile[0].submitFile(res.data.id)
        })
        .catch((err) => {
          console.log(err)
        })
      }
    }
  }
}
</script>

文件上传组件：

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
      <input type="file" ref="file" :id="job._id" class="inputfile" v-on:change="handleFileUpload()" />
      <label :for="job._id">Add Resume</label>
      <br>
      <span v-if="file" >
        {{ file.name }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      file: null
    }
  },
  props: ['job'],
  methods: {
    submitFile (refId) {
      let formData = new FormData()
      formData.append('files', this.file)
      formData.append('refId', refId)
      formData.append('field', 'Resume')
      formData.append('ref', 'application')
      this.$store.dispatch('uploadFile', formData)
        .then(() => {
          this.file = null
        })
    },
    handleFileUpload () {
      this.file = this.$refs.file.files[0]
    }
  }
}
</script>

Answer 1

您的代码中的问题是使用 this.$refs.form[0] 和 this.$refs.uploadFile[0]。这导致总是得到 this.$refs.form 和 this.$refs.uploadFile.

的第一个引用

正如Vue Guide所说：

When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.

因此您应该使用一个索引从 Ref 数组.

中获取正确的 ref

所以按照下面的方式更新您的代码应该可以工作。

将v-for="job in jobs"更改为v-for="(job, index) in jobs"
将submit(job.Position, job._id)更改为submit(job.Position, job._id, index)
在function=submit中，将this.$refs.form[0]替换为this.$refs.form[index]并将this.$refs.uploadFile[0]更改为this.$refs.uploadFile[index]

文件上传仅适用于 v-for 中的第一个组件

File upload only working on first component in v-for

file-upload

vue.js

v-for

vuetify.js