Vue.js配合Laravel8上传文件时File转JSON为空如何解决？

• 首先解释为什么File对象序列化后为空：File对象是浏览器内置的二进制对象，其属性均挂载在原型链上，不属于自身可枚举属性，JSON.stringify()默认仅序列化对象自身的可枚举属性，因此转换后得到空对象。
• 你的实现逻辑存在3处关键错误：
  • 文件上传不需要转JSON格式，直接通过multipart/form-data格式传输原生File对象即可，Laravel原生支持该格式的文件解析，转JSON反而会增加前后端的处理成本。
  • 网络请求逻辑写在了setup根作用域，组件初始化时就会触发请求，此时用户还未选择文件，传输的自然是空内容。
  • FormData.append()时传入的是整个reactive对象file，而非实际的文件对象file.file，同时手动设置Content-Type会丢失boundary分隔符，导致后端无法正常解析请求。

前端Vue代码 #

<template>
  <input type="file" @change="uploadFile($event, index, idx)" accept="image/*">
</template>

<script>
import { reactive } from 'vue'
import axios from 'axios'

export default {
  name: 'CreateCourse',
  setup(){
    const file = reactive({ file: null })

    const uploadFile = (e, idx, i) => {
      file.file = e.target.files[0]
      // 可选：校验文件类型、大小
      if (!file.file.type.startsWith('image/')) {
        alert('请选择图片文件')
        return
      }
      // 选完文件后触发提交
      submitFile()
    }

    const submitFile = () => {
      if (!file.file) return
      
      const formData = new FormData()
      // 传入实际的File对象
      formData.append("file", file.file)
      // 可以追加其他表单字段
      // formData.append('name', '测试课程')

      axios.post('http://127.0.0.1:8000/api/v1/courses', formData, {
        headers: {
          'accept': 'application/json',
          'Accept-Language': 'en-US,en;q=0.8'
          // 不要手动设置Content-Type，axios会自动处理
        }
      }).then(response => {
        console.log('上传成功', response)
      }).catch(err => {
        NotificationService.error(err.response)
        showLoader(false)
      })
    }

    return {
      uploadFile
    }
  }
}
</script>

后端Laravel接收代码 #

在对应的控制器方法中直接使用Laravel内置的文件处理方法即可：

public function store(Request $request)
{
    // 校验文件是否存在
    $request->validate([
        'file' => 'required|image|max:2048' // 限制为2M以内的图片
    ]);

    // 存储文件到storage/app/public目录，可根据需求调整磁盘
    $path = $request->file('file')->store('images', 'public');

    // 返回存储路径等信息给前端
    return response()->json([
        'path' => $path,
        'url' => asset('storage/' . $path)
    ]);
}

如果你确实需要将文件转为JSON格式传输（比如特殊业务场景），可以将文件转为Base64编码后再放入JSON：

const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
// 使用时
const base64 = await fileToBase64(file.file)
// 再把base64放到JSON对象里传输即可

注意该方案仅适合小文件，大文件转Base64会导致体积膨胀33%，传输效率大幅降低。

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