我能够让q-file上传一张图片, 我的Laravel API也能完美的处理. 当然,我需要一次上传多个文件,所以我试图切换到q-uploader,当我记录响应时,文件显示为[对象文件]。
我还尝试在FileController中使用$request->file('attachment'),但它返回的是null。
<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-file来上传时。
<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,
)),
)
可能你已经知道这个问题的答案了. 但这里是我所做的。我有同样的问题从q-uploader,发送一个文件到laravel,一切都OK。但是当我发送多个文件时卡住了。我不得不从各种渠道查阅信息来安排洞的过程.所以我做的是这样的:
在我的前端
<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 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;
}
}