Я пытаюсь загрузить изображение с другим полем, чтобы оно понравилось как сообщение с изображением patreon.
Я использую Laravel в качестве бэкэнда и протестировал РАБОТУ с использованием почтальона. Но для внешнего интерфейса, использующего q-uploader Quasar Framework - vue js, мне нужен совет.
это мой laravel контроллер:
public function createImagePost(Request $request) {
$validator = Validator::make($request->all(),[
'title' => 'required',
'permission' => 'required',
'images' => 'required',
]);
if ($validator->fails()) {
return response()->json([
'status' => 'failed',
'errors' => $validator->errors()
], 500);
} else {
if ($request->hasfile('images'))
{
$images = $request->file('images');
$names = array();
foreach($images as $image) {
$imageName = Auth::user()->id.'_image_'.time().'.'.$image->getClientOriginalExtension();
$image->storeAs('user_post_images', $imageName);
$names[] = $imageName;
}
UserPost::create([
'images' => json_encode($names),
'title' => $request->title,
'tags' => $request->tags,
'description' => $request->description,
'permission' => $request->permission,
'post_user_id' => Auth::user()->id
]);
return response()->json([
'status' => 'success',
'message' => 'Post has been created successfully!'
], 200);
} else {
return response()->json([
'status' => 'ERROR VRO',
'message' => 'ERROR'
], 500);
}
}
}
и это внешний интерфейс квазара:
<q-form @submit="createImagePost">
<q-card-section class="q-pt-none">
<!-- Fields -->
<q-uploader
label="Pick Some Images Here!"
multiple
color="teal"
accept="image/*"
style="max-width: 1200px; width: 100%"
flat
bordered
:factory="createImagePost"
url=""
ref="imageUploader"
/>
<br>
<q-input
type="text"
hint="Required"
label="Post Title"
v-model.trim="post_title"
@input="$v.post_title.$touch()"
:rules="[
val => $v.post_title.required || 'Post Title is required',
]"
:dense="dense"
/>
<br>
<q-input
type="textarea"
v-model="post_description"
hint="Tell a story"
label="Post Description"
:dense="dense"
/>
<br>
<div class="row">
<div class="col q-mr-md">
<q-select
outlined
:options="post_permission_options"
label="Permission"
hint="Required"
v-model.trim="post_permission"
@input="$v.post_permission.$touch()"
:rules="[
val => $v.post_permission.required || 'Post permission is required',
]"
/>
</div>
<div class="col">
<q-select
label="Tags"
outlined
v-model="post_tags"
use-input
use-chips
multiple
hide-dropdown-icon
input-debounce="0"
new-value-mode="add"
/>
</div>
</div>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup />
<q-btn flat label="Create" type="submit"/>
</q-card-actions>
</q-form>
createImagePost(files) {
let currentObj = this
currentObj.createImagePostLoading = true
const config = {
headers: { 'Content-Type': undefined }
}
const fd = new FormData()
fd.append('images', files)
fd.append('title', currentObj.title)
fd.append('tags', currentObj.tags)
fd.append('description', currentObj.description)
fd.append('permission', currentObj.permission)
axios.get('/sanctum/csrf-cookie').then(response => {
axios.post('/api/create-image-post', fd, config)
.then(function (response) {
currentObj.serverSuccess = response.data.message
currentObj.showCreatePostSuccess()
currentObj.createImagePostLoading = false
currentObj.create_image_post = false
currentObj.selected_file = []
})
.catch(function (error) {
if(error.response.data) {
currentObj.serverError = error.response.data.errors
}
currentObj.showCreatePostError()
currentObj.createImagePostLoading = false
currentObj.create_image_post = false
currentObj.errorModal = true
currentObj.selected_file = []
})
})
},
, и сообщение об ошибке совпадает с сообщением об ошибке, которое создается, если файл не найден. но для этого контроллера он работает, если я использую почтальон, я что-то упускаю с q-uploader?
Сообщение об ошибке:
{status: "ERROR VRO", message: "ERROR"}
status: "ERROR VRO"
message: "ERROR"