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

错误

{消息：“给定的数据无效。”，错误：{化身：[“化身必须是图像。”]}} 错误： {化身：[“化身必须是图像。”]} 头像： [“化身必须是图像。”] 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'
   }
 })

希望这会有所帮助。

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

1 个答案: