Q-Uploader Quasar Framework не может загрузить изображение - PullRequest
0 голосов
/ 15 апреля 2020

Я пытаюсь загрузить изображение с другим полем, чтобы оно понравилось как сообщение с изображением 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"
...