在laravel vuejs Axios中上传pdf文件

Question

I have created a project for bookshop and in the section of employee information I want to upload a PDF file using code given below.it give me the below error.I have been trying since few days but I could not get the solution if there is any sample way please guide me any help will be highly appreciated

The given data was invalid.","errors":{"file":["The file field is required.

controller code is

public function store(Request $request)
  {
       $DocumentType= new DocumentType();
                  $this->validate($request,[
            'name'=>'required',
            'file' => 'required',                
        ]);

        $DocumentType->name = $request->input('name');
        $fileName = time().'.'.$request->file->extension();  
        $request->file->move(public_path('Files'), $fileName);
        $DocumentType->file =  $name;
         $DocumentType->save();
         return response()->json($DocumentType);

  }

Vue code is

<template>
  <div class="container">
 <div
      class="modal fade"
      id="addNew"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addNewLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" v-show="!editMode" id="addNewLabel">ثبت اسناد جدید</h5>
            <h5 class="modal-title" v-show="editMode" id="addNewLabel">تمدید اسناد</h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" style="margin-right: 317px;">&times;</span>
            </button>
          </div>
          <form
            @submit.prevent="editMode ? updateDocumentType() : createDocumentType()"
            enctype="multipart/form-data"
          >
            <div class="modal-body">
              <div class="form-group">
                <input
                  v-model="form.name"
                  placeholder="نام"
                  type="text"
                  name="name"
                  class="form-control"
                  :class="{ 'is-invalid': form.errors.has('name') }"
                />
                <has-error :form="form" field="name"></has-error>
              </div>
              <div class="form-group">
                <label for="file" class="col-sm-4 control-label">File</label>

                <div class="col-sm-12">
                  <input
                    type="file"
                    class="form-input"
                    :class="{ 'is-invalid': form.errors.has('file') }"
                    id="file"
                    name="file"
                  />
                  <has-error :form="form" field="file"></has-error>
                </div>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">لغو</button>

                <button
                  v-show="editMode"
                  :disabled="form.busy"
                  type="submit"
                  class="btn btn-success"
                >تمدید</button>
                <button
                  v-show="!editMode"
                  :disabled="form.busy"
                  type="submit"
                  class="btn btn-primary"
                >ثبت</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
</template>
  </div>
<script>
  createDocumentType() {
      // axios.get("api/getAllDocumentTypeDocumentType").then(response => {
      //   let data = response.data;

      if (this.form.name == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>نام لازم است.</h5>"
        });
      }
      // else if (this.form.file == "") {
      //   toast.fire({
      //     type: "warning",
      //     icon: "warning",
      //     html: "<h5>لطفا،اسناد را انتخاب نماید.</h5>"
      //   });
      // }
      else {
        this.form
          .post("api/DocumentType")
          .then(() => {
            //    the below function will be use to reload the page

            //   this.$emit("refreshPage");
            $("#addNew").modal("hide");
            toast.fire({
              icon: "success",
              type: "success",
              html: "<h5> اسنادموافقانه اجاد گردید</h5>"
            });
            Fire.$emit("refreshPage");
            this.form.reset();
            //   this.$Progress.finish();
          })
          .catch(er => {
            console.log(er);
          });
      }
    }
</script>

Migration table code

 public function up()
    {
        Schema::create('document_types', function (Blueprint $table) {
            $table->bigIncrements('id');
             $table->string('name');            
            $table->string('file')->nullable();
             $table->softDeletes();
            $table->timestamps();
        });
    }

Code in API route

Route::apiResources(['DocumentType'=>'API\DocumentTypeController']);
Route::get('getAllDocumentType','API\DocumentTypeController@getAll');

Answer 1

The given data was invalid.","errors":{"file":["The file field is required. This error is because there is no existing file in your payload upon submission of your form.

in your form, bind data to your input file like what you did to your input name. like this

<input
      type="file"
      v-model="form.file"
      class="form-input"
      :class="{ 'is-invalid': form.errors.has('file') }"
       id="file"
      name="file"
 />

Or, attach an event to this file input and process the file provided. like this

<input
          type="file"
          class="form-input"
          :class="{ 'is-invalid': form.errors.has('file') }"
          id="file"
          name="file"
          @change="selectFile"
/>

Then in your methods, create also a selectFile function

methods: {
    selectFile(file) {
         if(file == "") return false

         this.form.file = file.target.files
         console.log(this.form.file)
    }
}