Изображение не проверяется: «Аватар должен быть изображением»

Question

Я использую модал для предварительного просмотра аватара. Даже то, что вызывает модальное состояние, находится за пределами возможности иметь родительскую дочернюю структуру, поэтому я должен передать объект файла моему компоненту UpdateAvatar.

Html

<avatar-update :image-blob="avatarFile" :show="avatarModalShow" 
               @close="avatarModalShow = !avatarModalShow" 
               :change-avatar="updateCrop"> </avatar-update>

Экземпляр корня

data() {
    return {
        avatarModalShow: false,
        avatarFile: null,
    }
},

methods: {
    onFileChange: function(e) {
        this.avatarFile = e.target.files[0];
        this.avatarModalShow = !this.avatarModalShow;
  },
},

AvatarUpdate

export default {
    props: ['show','imgUrl','changeAvatar','imageBlob'],
    data() {
      return {
        image: null,
        message: null,
        internalImageObj: null
      }
    },
    watch: {
      changeAvatar: function(){     
          this.image = this.imgUrl;
      },
      imageBlob: function (newVal) {
        let reader  = new FileReader()
        reader.readAsDataURL(newVal)
        reader.addEventListener('load', () => {
          this.internalImageObj = reader.result
        }, false)  
      }
    },
    updated: function () {
      this.image = this.imgUrl;      
    },
    methods: {
        close: function(){
          this.$emit('close');
        },

        submitAvatar: function(){


          const avatarFormData = new FormData();
          avatarFormData.append('avatar', this.internalImageObj);
          console.log(avatarFormData);

          axios({
              method: 'POST',
              url: '/profile/avatar',
              data: avatarFormData,
          }).then(function (response) {


          this.message = "Your avatar has been submitted";   

          }.bind(this))
          .catch(function (error) {
              console.log(error);
          });
        }
    }
}

UserController

public function avatar(Request $request)
{
    $request->validate([
        'avatar' => 'image',
    ]);

    return $request->all();
}

Когда я return $request->all(); в функции аватара без проверки на UserController, я получаю этот вывод: avatar:"data:image/png;base64,iVBORw0KGgoAAAANSUhSomeLongString

Error

{сообщение: «Указанные данные недействительны.», Ошибки: {avatar: [«Аватар должен быть изображением.»]}} ошибки : {avatar: ["Аватар должен быть изображением."]} аватар : [«Аватар должен быть изображением».] 0 : «Аватар должен быть изображением». сообщение : «Указанные данные неверны.»

Answer 1

это потому, что ваше правило проверки для avatar равно image или mimes:jpeg,bmp,png, оно будет искать файл, в котором тип mime - jpeg, bmp, png. но в вашем случае ваш axios отправляет его как base64, который не имеет тип MIME. вам нужно включить заголовок 'Content-Type': 'multipart/form-data' в ваш объект axios, как этот,

axios({
   method: 'POST',
   url: '/profile/avatar',
   data: avatarFormData,
   headers: {
    'Content-Type': 'multipart/form-data'
   }
 })

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