Quasar q-uploader с Laravel не распознает файл, пока работает q-файл

Question

Мне удалось получить q-файл для загрузки одного изображения, и мой Laravel API отлично с этим справляется. Конечно, мне нужно загрузить несколько файлов одновременно, поэтому я пытаюсь переключиться на q-uploader, и когда я регистрирую ответ, файл отображается как [объектный файл].

Я также пытался использовать $ request-> file ('attachment') в FileController, но он возвращает ноль.

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

Затем в моем FileController. php:

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

возвращает:

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')
           })
        })
     },

И на моей бэкэнд-функции, я храню только файл (Я храню его в папке publi c вместо хранилища, поскольку у меня есть общий хостинг в этом проекте), кроме того, вы можете добавить код для сохранения местоположения файла в вашей базе данных:

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;
    }
}