使用Vue3 Composition API向Laravel上传文件时数据库存入null如何解决

前端Vue3部分修正 #

存在问题 #

• setup() 作用域内不支持this调用，原有代码无法正确获取绑定的文件DOM
• 文件上传必须使用FormData格式封装，默认JSON格式后端无法识别上传文件
• 未从文件选择器的files列表中提取选中的目标文件

修正后代码 #

模板部分

<input ref="file" @change="handleFileUpload" type="file" />
<button @click="senddata" class="">UPLOAD</button>

逻辑部分

<script>
import axios from "axios";
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const file = ref(null)
    // 存储选中的文件对象
    const selectedFile = ref(null)

    const handleFileUpload = () => {
      // 取出第一个选中的文件
      selectedFile.value = file.value.files[0]
      console.log("selected file", selectedFile.value)
    }

    function senddata() {
      if (!selectedFile.value) {
        alert('请先选择文件')
        return
      }
      // 用FormData封装文件
      const formData = new FormData()
      formData.append('file', selectedFile.value)

      axios.post('http://127.0.0.1:8000/api/store-files', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        const message = response.data.message;
        alert(message);
      });
    }

    return {
      senddata,
      handleFileUpload,
      file
    };
  }
})
</script>

后端Laravel部分修正 #

存在问题 #

• 前端传递的文件字段名为file，后端错误使用file_link读取，导致无法获取上传内容
• 重复实例化Files模型，代码冗余
• 未处理文件未上传的场景，无对应返回逻辑

修正后控制器代码 #

public function store(Request $request)
{
    // 验证文件存在
    $request->validate([
        'file' => 'required|file'
    ]);

    $fileModel = new Files();
    if ($request->hasFile('file')) {
        $uploadFile = $request->file('file');
        $file_name = time() . '_' . $uploadFile->getClientOriginalName();
        // 正确使用file字段读取文件
        $file_path = $uploadFile->storeAs('uploads', $file_name, 'public');

        $fileModel->file_name = $file_name;
        $fileModel->file_path = '/storage/' . $file_path;
        $fileModel->save();
        return response()->json([
            'message' => 'File added'
        ]);
    }

    return response()->json([
        'message' => '文件上传失败'
    ], 400);
}

额外注意事项 #

• 执行php artisan storage:link生成storage的公共访问软链，否则前端无法访问上传的文件
• 确认config/filesystems.php中public磁盘的配置符合预期

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