Vue / Laravel / Vuetify - 在数组中附加多个文件

Question

我有一个数据数组（父），其中每个元素都有自己的row.files 数组（子）。提交表单时，每个父数据数组只捕获一个子文件。

模板

<v-form  ref="form" @submit.prevent="save()">
  <v-btn type="submit" >Submit</v-btn>
  <v-col cols="3" v-for="row in chunk" :key="row.id">
    <v-file-input
      v-model="row.files"
      counter
      multiple
      small-chips
    >
    </v-file-input>
  </v-col>
</v-form>

 save() {
   for( let i = 0; i < this.rows.length; i++ ) {
     let formData = new FormData()
       if(this.rows[i].files) {
         for( let j = 0; j < this.rows[i].files.length; j++ ) {
           formData.append('file', this.rows[i].files[j])
         }
       }
      axios.post('/api/performance', formData, { headers: { 'Content-Type': 'multipart/form-data' }})
    }
 }

控制器

public function store(Request $request)
  {
    if($request->file('file')) {
      $file = $request->file;
      $filename = $file->getClientOriginalName();
      $path = hash( 'sha256', time());
      if(Storage::disk('employee_objective')->put($path.'/'.$filename, File::get($file))) {
        $input['employee_objective_kpa_id'] = $objectiveKPA->id;
        $input['filename'] = $filename;
        $input['mime'] = $file->getClientMimeType();
        $input['path'] = $path;
        $input['size'] = $file->getClientSize();
        EmployeeObjectiveFile::create($input);
      }

    }
  }

如果上传是独立的而不是在数组中，它会起作用。

for( let i = 0; i < this.files.length; i++ ) {
  let formData = new FormData();
  formData.append('file', this.files[i]);

  axios.post('/api/performance', formData, { headers: { 'Content-Type': 'multipart/form-data' }})
    })
  }

Answer 1

追加到formData时，如果有多个文件，应在files key后面追加[]：

formData.append('file[]', this.rows[i].files[j])

所以它附加到文件数组中，否则您将在每次迭代时重写 file 属性。

然后在后端，您可以像这样访问文件：

$files = $request->file('file');
foreach ($files as $file) {

    // Do the work for each file

}