Laravel中使用BootstrapVue上传文件后端接收值为null问题求助

问题根因 #

你直接将普通JS对象提交给后端，axios默认会将对象序列化为JSON格式，b-form-file绑定的File对象序列化后就会变成你看到的{"$path": null}结构，后端自然无法识别为上传文件。上传文件必须使用FormData格式封装数据。

修复方案 #

修改提交方法，将表单数据封装为FormData后再提交：

methods:{
  onSubmit(event) {
    event.preventDefault();
    // 构造FormData实例
    const formData = new FormData();
    // 批量追加表单字段
    Object.keys(this.form).forEach(key => {
      formData.append(key, this.form[key]);
    })
    axios
      .post("/equipments/create", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then(response => {
        console.log(response);
      })
  };
},

后端校验补充 #

• Laravel端可以先用$request->hasFile('calibration_cert')验证文件是否上传成功，返回true即为接收正常
• 操作文件统一使用$request->file('calibration_cert')方法，不要直接从$request->all()中读取
• 确认php.ini配置中的upload_max_filesize、post_max_size大于你上传的文件大小，避免大文件被过滤

内容的提问来源于stack exchange，提问作者Hanyi Koh