Vue.js使用Axios向Laravel API上传文件时POST请求载荷为空的问题

• 上传逻辑中存储的this.file并非原生File对象，是通过FileReader读取生成的Base64格式DataURL字符串。将该字符串塞入FormData后，后端收到的仅是普通长文本，而非可识别的文件二进制流，自然无法判定为有效上传文件。
• 手动在请求头中拼接随机生成的multipart/form-data边界值，该自定义值与浏览器实际生成的FormData报文内部分割标记完全不匹配，后端按错误边界切分请求体时无法定位文件内容，最终判定请求载荷为空。

1. 调整文件获取逻辑，直接存储原生File实例
   无需用FileReader将上传文件转成Base64格式。如需实现图片预览功能，可单独生成临时预览地址，不可覆盖用于上传的文件对象：

   let selectedImage = this.$refs.fileInput.files[0];
   // 单独生成预览用地址，不干扰上传流程
   this.imagePreview = URL.createObjectURL(selectedImage);
   // 直接将原生File实例作为上传文件源
   this.file = selectedImage;
   

2. 调整Axios请求配置，移除手动设置的Content-Type及自定义边界
   Axios会自动检测FormData实例，自动匹配正确的multipart/form-data请求头及对应报文边界，无需手动配置。若全局Axios设置了默认的application/json请求头，需在本次请求中将该配置置空，让Axios走自动识别逻辑：

   const fd = new FormData();
   fd.append('file', this.file);
   // 若需同时发送普通字段，可直接追加到FormData中
   fd.append('file_alias', '项目封面图');
   fd.append('sort', 1);
   
   axios.post("/api/images", fd, {
     headers: {
       "Accept" : "application/json",
       // 清空全局默认的JSON格式请求头，让Axios自动适配FormData格式
       "Content-Type": undefined,
       "Authorization": "Bearer " + this.user.api_token,
       "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
     }
   })
   .then(response => {
     // 处理上传成功逻辑
   })
   .catch(errors => {
     // 处理上传失败逻辑
   });
   

• 不要在全局Axios请求拦截器中强制为所有请求统一设置Content-Type，遇到FormData类型的请求参数时需跳过该配置，否则会出现请求头与请求体格式不匹配的问题。
• 按上述规范传参后，Laravel端无需额外改造，可直接通过$request->file('file')获取上传文件，原有文件校验、存储逻辑均可正常运行。

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