图片未验证：“头像必须是图片”

Question

我正在使用模态来预览化身。触发模型的事件超出了拥有父子结构的能力，因此我必须将文件对象传递给我的更新头像组件。

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;
  },
},

更新形象

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();
}

当我在avatar函数中return $request->all();没有在UserController上验证时我得到了这个输出：avatar:"data:image/png;base64,iVBORw0KGgoAAAANSUhSomeLongString

错误

{message：“给定的数据无效。”，错误：{avatar：[“化身必须是图片。”]}}错误：{avatar：[“化身必须是图片。”]}头像：[ “头像必须是一个图像。”] 0：“头像必须是一个图像。”消息：“给定的数据无效。”

Answer 1

这是因为avatar的验证规则是image或mimes:jpeg,bmp,png，它会查找mime类型为jpeg，bmp，png的文件。但在你的情况下，你的axios发送它作为base64没有mime类型。你需要在你的axios对象中加入'Content-Type': 'multipart/form-data'标题，

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

希望这可以帮助。