Vue+Axios上传文件时FormData中文件显示为空的问题

我用Vue.js前端处理图片上传，通过Axios向Laravel后端发起POST请求。其他FormData字段能正常传递，但文件字段在请求中始终为空。控制台打印FormData时file显示为{}，但展开后能看到完整的File对象。尝试手动给Axios添加headers: { 'content-type': 'multipart/form-data' }也没有解决问题。

前端代码 #

<script setup>
/*...*/
const handleFileUpload = (event) => {
    uploadedFile = event.target.files[0];
    uploadedFileUrl.value = URL.createObjectURL(event.target.files[0]);
};

const saveItem = () => {
    const formData = new FormData();
    formData.append('file', uploadedFile);
    formData.set('name', inputName.value);
    formData.set('type', inputType.value);
    formData.set('price', inputPrice.value);
    formData.set('description', inputDescription.value);
    console.log(formData);

    axios.post('/products', formData)
        .then(function(){
            console.log('SUCCESS!!');
    })
    .catch(function(){
        console.log('FAILURE!!');
    });
};
</script>

<template>
    <form class="row g-3 needs-validation" novalidate @submit.prevent="save" enctype="multipart/form-data">
        <input type="file" id="inputImg" accept="image/png, image/jpeg" @change="handleFileUpload($event)" />
    </form>
    <button type="button" class="btn btn-success" @click="saveItem">Save</button>
</template>

控制台输出 #

FormData(5) { file → {}, name → "testItem", type → "hot dish", price → "1", description → "desc" }

解决方案 #

• 修复变量声明问题：在<script setup>中，uploadedFile未声明为响应式变量或局部变量，会导致上下文异常。改为用ref声明：

  const uploadedFile = ref(null);
  const handleFileUpload = (event) => {
      uploadedFile.value = event.target.files[0];
      uploadedFileUrl.value = URL.createObjectURL(event.target.files[0]);
  };
  

• 不要手动设置multipart/form-data请求头：Axios会自动根据FormData生成包含boundary的正确请求头，手动设置会丢失boundary，导致后端无法解析文件。
• 统一FormData的字段添加方式：建议全部使用append方法，避免混合append和set（虽然set本身没问题，但统一方式更易维护）：

  const formData = new FormData();
  formData.append('file', uploadedFile.value);
  formData.append('name', inputName.value);
  formData.append('type', inputType.value);
  formData.append('price', inputPrice.value);
  formData.append('description', inputDescription.value);
  

• 检查Laravel后端配置：确保路由接收POST请求，控制器中使用$request->file('file')获取文件，同时确认存储目录权限正常，配置文件中的文件存储设置正确。

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