Загрузка изображений с использованием vuejs и laravel через API не работает

Question

Я пытаюсь загрузить изображение, используя vuejs и laravel через api. В vue.js я отправляю информацию об изображении в laravel через api. но laravel не получает информацию в правильном формате. вот почему он показывает ошибку. Может быть, моя процедура не так.

Вот мои коды

Vue.js коды

`

    <input type="file" accept="image/*" @change="doctorImageSelected(event)">
    <button style="float: left;" class="ajmal-custom-btn" @click="goToUploadImage()">Upload</button>

`

`

       doctorImageSelected (event) {
            let image = event.target.files[0]
            this.image = image
            // console.log(this.image)
            let reader = new FileReader();
            reader.readAsDataURL(image);
            reader.onload = event => {
                this.image = event.target.result

            }
        },
        goToUploadImage(){
            var self = this
            this.$http.post(apiDomain + 'api/savePatientProfilePicture',{pic: self.image,id: self.id})
                .then(response => {
                    if(response.status === 200){
                        console.log(response)
                    }
                }).catch((e) => {
                    console.log(e)
                })
        }

`

Код Laravel

`

  public function savePatientProfilePicture(Request $request){
    $pictureInfo = $request->pic;
    $picName = $request->id . $pictureInfo->getClientOriginalName();
    return $picName;
    $folder = "patinetImage/";
    $pictureInfo->move($folder,$picName);
    $picUrl = $folder.$picName;
    $user = new User();
    $patientPic = User::find($request->id);
    $patientPic->image = $picUrl;
    $patientPic->save();
  }

`

Ошибка

Вызов функции-члена getClientOriginalName() в строке

Answer 1

Убедитесь, что вы добавили Content-Type: application/x-www-form-urlencoded в заголовок запроса.

После этого попробуйте этот код

goToUploadImage(){
  var formData = new FormData;
  formData.append("pic", this.image, this.name);
  formData.append("id", this.id);


  var self = this
  this.$http.post(apiDomain + 'api/savePatientProfilePicture',formData, {
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      })
      .then(response => {
          if(response.status === 200){
              console.log(response)
          }
      }).catch((e) => {
          console.log(e)
      })
}

Answer 2

Если вы хотите получить оригинальное имя файла, вам нужно вызвать его для объекта UploadedFile

$pictureInfo = $request->file('pic');
$picName = $request->id . $pictureInfo->getClientOriginalName();

Вы можете упростить это, используя ref и fetch api

<input type="file" accept="image/*" @change="doctorImageSelected()" ref="doctorImage" />
<button style="float: left;" class="ajmal-custom-btn" @click="goToUploadImage()">Upload</button>

И в Javascript

export default {
    data() {
        return {
            image: {},
            id: 1 // Your ID and rest of data here
        };
    },
    methods: {
        doctorImageSelected(event) {
            this.image = this.$refs.doctorImage.files[0];
        },
        goToUploadImage() {
            var fd = new FormData();
            fd.append("pic", this.image);
            fd.append("id", this.id);
            fetch(`${apiDomain}api/savePatientProfilePicture`, {
                headers: {
                    Accept: "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')
                        .content
                },
                method: "POST",
                credentials: "same-origin",
                body: fd
            })
                .then(response => {
                    if (response.status === 200) {
                        console.log(response);
                    }
                })
                .catch(e => {
                    console.log(e);
                });
        }
    }
};

Надеюсь, это поможет