Uploading pdf file in laravel vuejs Axios

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

it gives me the success message but noting is either inserted in Public-Files folder nor in database .

controller code is

public function store(Request $request)
  {
       $DocumentType= new DocumentType();
                  $this->validate($request,[
            'name'=>'required',
            'file' => 'required',                
        ]);
        
                $DocumentType= new DocumentType();
    if($file = $request->file('file')){
        $name =  $file->getClientOriginalName();
        if($file->move('Files',$name))
        {
            
            //  $DocumentType->name='name'
            $DocumentType->name = $request->input('name');
            $DocumentType->file=$name;
            $DocumentType->save();
            

        }
        else
        {
    return 'file not uploaded';
        }

    }
    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"  @change="selectFile"
                  />
                  <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>
    selectFile(file) {
  if (file == "") return false;

  this.form.file = file.target.files;
  console.log(this.form.file);
  // console.log(file);
},
  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');