Как загрузить файл с помощью компонента vue и контроллера laravel [Axios]

Question

Я хочу загрузить файл изображения с компонентом vue в контроллер laravel.Моя проблема возникает, когда я нажимаю кнопку отправки, имя / описание / адрес сохраняется, но имя изображения не сохраняется

Я хочу сохранить имя изображения в моей базе данных, но если ($ request-> hasFile ('id_image')) всегда возвращать false

Можете ли вы рассказать мне о синтаксисе для решения этого решения?

это create.vue

       <form action="/listorgs" enctype="multipart/form-data">
          <div class="form-group">
            <label>name_org:</label>
            <input type="text" class="form-control" v-model="org.name_org">
          </div>
          <div class="form-group">
            <label>picture:</label>
            <input
              type="file"
              @change="onFileChange"
              name="name_image"
              id="id_image"
              class="inputFile"
            >
          </div>
          <div class="form-group">
            <label>description:</label>
            <textarea
              class="form-control mb-2"
              rows="5"
              v-model="org.description"
            ></textarea>
          </div>
          <div class="form-group">
            <label>address:</label>
            <input type="text" class="form-control" v-model="org.address">
          </div>
          <div class="form-group">
            <button class="btn btn-primary" v-on:click="addNewOrg()">Save</button>
          </div>
        </form>

в экспорте по умолчанию

data() {
    return {
      org: {
        name_org: "",
        description: "",
        address: "",
        image: ""
      }
    };
  },
  methods: {
    addNewOrg() {
      axios
        .post("/api/listorgs", this.org)
        .then(response => {
          console.log(response.data);
          if (response.data.etat) {
            this.org = {
              name_org: response.data.etat.name_org,
              description: response.data.etat.description,
              address: response.data.etat.address,
              picture: response.data.etat.image
            };
          }
        })
        .catch(error => {
          console.log("errors: ", error);
        });
        console.log(this.image);
    },
    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage(file) {
      let reader = new FileReader();
      reader.onload = e => {
        this.org.image = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }

Это мой контроллер

$listorg=new ListOrg();
$listorg->name_org=$request->get('name_org');
$listorg->description=$request->get('description');
$listorg->address=$request->get('address');
if($request->hasFile('name_image')){
    $listorg->picture= $request->image->store('images');
}
$listorg->save();
return response()->json($listorg);

Это говорит

Answer 1

Вы путаете 3 разных метода FORM POST.Позвольте мне уточнить:

1. Если вы хотите использовать axios, измените свою форму и удалите action и enctype, чтобы избежать путаницы в том, что вы выполняете AJAX POST, а не регулярноFORM POST.

2. Определите, пытаетесь ли вы получить файл в кодировке base64 или в двоичном виде.Похоже, вы хотите создать двоичный файл, поэтому избавьтесь от этого избыточного кода base64.И связать входной файл напрямую с v-моделью.

3. ОК, так что теперь, когда мы уверены, что вы хотите сделать двоичный файл, потому что ваш код на стороне сервера имеет это $request->hasFile('name_image'), вы бынеобходимо отправить его как объект FormData.

Итак, ваш код будет выглядеть так:

<!-- point #1, we made it clear that it is an AJAX submit 
by handling the submit event. -->
     <form @submit.prevent="addNewOrg">
          <div class="form-group">
            <label>name_org:</label>
            <input type="text" class="form-control" v-model="org.name_org">
          </div>
          <div class="form-group">
            <label>picture:</label>
<!-- remove change event handling and bind 
the file directly to the image property -->
            <input
              type="file"
              v-model="org.image"
              class="inputFile"
            >
          </div>
          <div class="form-group">
            <label>description:</label>
            <textarea
              class="form-control mb-2"
              rows="5"
              v-model="org.description"
            ></textarea>
          </div>
          <div class="form-group">
            <label>address:</label>
            <input type="text" class="form-control" v-model="org.address">
          </div>
          <div class="form-group">
<!-- point #1, change the button type to submit button.  
The form and submit button combination also has a 
side-affect/benefit of auto-submit if user hit 
the enter button on the form. -->
            <button class="btn btn-primary" type="submit">Save</button>
          </div>
        </form>

data() {
    return {
      org: {
        name_org: "",
        description: "",
        address: "",
        image: null
      }
    };
  },
  methods: {
    addNewOrg() {
      // point #2, to do binary data upload 
      // you need to use FormData
      var fd = new FormData();
      for (var key in this.org) {
        fd.append(key, this.org[key]);
      }

      axios
        .post("/api/listorgs", fd)
        .then(response => {
          console.log(response.data);
          if (response.data.etat) {
            this.org = {
              name_org: response.data.etat.name_org,
              description: response.data.etat.description,
              address: response.data.etat.address,
              picture: response.data.etat.image
            };
          }
        })
        .catch(error => {
          console.log("errors: ", error);
        });
        console.log(this.image);
    }

/* Since you're doing binary submit, you don't need 
all that base64 image data url codes, unless you 
want to do something else like preview image 
canvas before upload or something 
similar. */

А затем ваш код на стороне сервера:

$listorg=new ListOrg();
$listorg->name_org=$request->get('name_org');
$listorg->description=$request->get('description');
$listorg->address=$request->get('address');

/* you're submitting it as image with ajax
 not a regular form post so you don't want 
to use the name of the input.  That's why 
I removed the input name in the html 
above to avoid confusion */

if($request->hasFile('image')){
    $listorg->picture= $request->image->store('images');
}
$listorg->save();
return response()->json($listorg);

Answer 2

$ listorg-> фотография.

Если я прав, данные, возвращаемые с контроллера, не имеют свойства изображения. попробуйте console.log (this.picture);

Answer 3

Ваш javascript ссылается на поле 'image', а ваше поле называется 'id_image'?

Извините, я пока не могу комментировать (оценка), но, возможно, попробуйте придерживаться какого-то соглашения?

Попробуйте просто сбросить и скрыть полный запрос в методе вашего контроллера.

Может дать вам хорошее представление о том, что не так.