带有 Laravel 的 Quasar q-uploader 在 q-file 工作时无法识别文件

Question

我能够获取 q-file 来上传单张图片，我的 Laravel API 处理得很好。当然，我需要一次上传多个文件，所以我尝试切换到 q-uploader，当我记录响应时，文件显示为 [object File]。

我也尝试在 FileController 中使用 $request->file('attachment') 但它 returns null.

    <q-uploader
      :factory="uploadFactory"
      label="Upload Images/Files"
      color="primary"
      multiple
    />

然后在我的 FileController.php:

public function upload(Request $request) {
  \Log::info($request);
}

returns:

array (
  'attachment' => '[object File]',
  'fileable_type' => 'App\Task',
  'fileable_id' => '27375',
  'vessel_id' => '1',
)

我要上传的工厂：

uploadFactory (file) {
  let data = new FormData()
  data.append('attachment', file)
  data.append('fileable_type', 'App\Task')
  data.append('fileable_id', this.task.id)
  data.append('vessel_id', this.vessel.id)
  return new Promise((resolve, reject) => {
    this.$axios.post('/api/file/upload', data, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => {
      console.log(response)
      resolve(null)
    }).catch(error => {
      if (error) {
        console.log(error)
      }
    })
  })
},

当我用 q 文件尝试这个时：

    <q-file color="primary" v-model="attachments" label="Images/Files" outlined>
      <template v-slot:prepend>
        <q-icon name="attach_file" />
      </template>
      <template v-slot:after v-if="canUpload">
        <q-btn
          color="primary"
          dense
          icon="cloud_upload"
          round
          @click="submitFiles"
          :disable="!canUpload"
          :loading="isUploading"
        />
      </template>
    </q-file>

有效，这是我为请求登录 Laravel 的内容：

array (
'fileable_type' => 'App\Task',
  'fileable_id' => '27375',
  'vessel_id' => '1',
  'attachments' => 
  Illuminate\Http\UploadedFile::__set_state(array(
     'test' => false,
     'originalName' => 'IMG_0126.jpg',
     'mimeType' => 'image/jpeg',
     'error' => 0,
     'hashName' => NULL,
  )),
)

Answer 1

可能您已经找到了这个问题的答案。但这就是我所做的。我从 q-uploader 遇到了同样的问题，将一个文件发送到 laravel，一切正常。但是我在发送多个文件时卡住了。我不得不查阅各种来源的信息来安排打孔过程。所以我所做的是：

在我的前端：

<q-uploader
                 :factory="uploadFiles"
                 :loading="uploadPercent"
                 :url="getUrl()"
                 @finish="finished"
                 label="Cargar Archivos (max 2MB)"
                 ref="uploader"
                 multiple
                 bordered
                 batch
                 accept=".png, .jpeg, .jpg, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .csv, .pdf, pdf/*, image/*"
                 :max-file-size="2048000"
                 />

关于我的方法：

uploadFiles(file){
        this.uploadPercentage = true
        let files = file
        console.log(files)
        let files_count = files.length + this.files.length
        if(files_count > 10){
           this.Notify(`El límite de archivos por tarea es de 10`,'negative')
           this.finished()
           return
        }
        const data = new FormData()
        for(var i = 0; i < files.length; i++){
           let file = files[i]
           data.append(`files[${i}]`, file)
        }
        data.append('teacher', this.teacher)
        data.append('homework', this.homework)
        return new Promise((resolve, reject) => {
           this.$axios.post(`${process.env.API}/homework/upload-files`, data,
           {
              headers: { 'content-type': 'multipart/form-data' },
              processData: false,  contentType: false
           })
           .then(res => {
              resolve(null)
              this.uploadPercentage = false
              this.files = res.data
              this.Notify('Se subieron los archivos con éxito','positive')
           })
           .catch(err => {
              reject(err)
              this.errors = err.response.data.errors
              this.uploadPercentage = false
              this.Notify('No se pudieron cargar los archivos, o el formato de alguno de los archivos no es correcto, o alguno de los archivos pesa más de 2MB','negative')
           })
        })
     },

而在我的后端功能上，我只存储文件（我将它存储在 public 文件夹而不是存储，因为我在这个项目上有一个共享主机），另外你可以添加一些将文件位置保存到数据库的代码：

public function upload_files(Request $request)
{
    $homework = DB::table('homeworks as h')
        ->join('teachers as t','t.id','=','h.teacher_id')
        ->join('users as u','u.id','=','t.teacher_id')
        ->select('h.id')
        ->where('h.code','=',$request->homework)
        ->where('u.code','=',$request->teacher)
        ->first();

    if(!$homework){
        return response()->json(['success'=>false,'msg'=>'Not avalid homework'],422);
    }

    try{
        DB::beginTransaction();

        $files = $request->file('files');

        if(!empty($files)){
            for($i = 0; $i < count($files); $i++){
                $file = $files[$i];
                $filename = $request->homework.'_'.uniqid('doc_').'.'.$file->getClientOriginalExtension();
                $path = public_path('/uploads');
                $file->move($path, $filename);
            }
        }

        DB::commit();

        return response()->json(['success' => true], 200);
    }
    catch (\Exception $e) 
    {
        DB::rollback();
        throw $e;
    }
}

带有 Laravel 的 Quasar q-uploader 在 q-file 工作时无法识别文件

Quasar q-uploader with Laravel not recognizing the file while q-file works

laravel

quasar

laravel-filesystem

quasar-framework

laravel-5.8