Vue3组合式API中vue-filepond文件获取问题及Symfony API对接求助

• this使用错误：在<script setup>语法糖中不存在this上下文，handleFilePondInit里的this.$refs.pond无法获取到FilePond实例。
• 插件导入拼写错误：FilPondPluginFileValidateSize应为FilePondPluginFileValidateSize（首字母漏了e），会导致尺寸验证插件无法正常加载。
• 文件变量初始化错误：myFiles仅用ref()声明但未初始化为空数组，FilePond的files属性需要绑定数组类型的响应式变量。
• 提交函数无实际逻辑：handleSubmit仅打印字符串，没有获取FilePond中的文件，也未实现向Symfony API发送请求的逻辑。
• 未同步文件状态：没有监听FilePond的文件变更事件，无法实时同步文件到本地变量。

<script setup>
import { ref } from 'vue';
import axios from 'axios'; // 需先安装：npm install axios
// Import FilePond
import vueFilePond from 'vue-filepond';
// Import plugins（修正拼写错误）
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js';
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.esm.js';
// Import styles
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
// Create FilePond component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview, FilePondPluginFileValidateSize);

// 初始化空数组绑定FilePond的files属性
const myFiles = ref([]);
// 获取FilePond实例的ref
const pond = ref(null);

// 修正初始化函数，直接使用pond ref访问实例
function handleFilePondInit() {
  console.log('FilePond 初始化完成');
  console.log('当前文件列表:', pond.value.getFiles());
}

// 监听文件添加事件，同步到本地变量
function handleFileAdded(file) {
  myFiles.value.push(file);
  console.log('已添加文件:', file);
}

// 监听文件移除事件，同步到本地变量
function handleFileRemoved(file) {
  const index = myFiles.value.findIndex(item => item.id === file.id);
  if (index !== -1) {
    myFiles.value.splice(index, 1);
  }
}

// 提交到Symfony API的核心逻辑
async function handleSubmit() {
  if (myFiles.value.length === 0) {
    console.log('请选择要上传的图片');
    return;
  }

  // 创建FormData对象，适配Symfony接收文件的格式
  const formData = new FormData();
  // FilePond的file对象中，file属性是原始File实例
  formData.append('photo', myFiles.value[0].file, myFiles.value[0].file.name);

  try {
    // 替换为你的Symfony API接口地址
    const response = await axios.post('https://your-symfony-api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('上传成功:', response.data);
    // 上传成功后清空FilePond和本地变量
    pond.value.removeFiles();
    myFiles.value = [];
  } catch (error) {
    console.error('上传失败:', error.response?.data || error.message);
  }
}
</script>

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <file-pond
          name="photo"
          ref="pond"
          class-name="my-pond"
          label-idle="拖拽图片到这里..."
          :allow-multiple="false"
          accepted-file-types="image/jpeg, image/png"
          :files="myFiles"
          credits="false"
          @init="handleFilePondInit"
          @addfile="handleFileAdded"
          @removefile="handleFileRemoved"
      />
      <button type="submit" :disabled="myFiles.length === 0">上传图片</button>
    </form>
  </div>
</template>

在Symfony控制器中，可以这样处理上传请求：

<?php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class UploadController extends AbstractController
{
    #[Route('/upload', name: 'app_upload', methods: ['POST'])]
    public function upload(Request $request): Response
    {
        // 获取上传的文件
        $file = $request->files->get('photo');
        if (!$file) {
            return $this->json(['error' => '未上传文件'], Response::HTTP_BAD_REQUEST);
        }

        // 后端二次验证文件类型（增强安全性）
        if (!in_array($file->getMimeType(), ['image/jpeg', 'image/png'])) {
            return $this->json(['error' => '仅支持JPG/PNG格式'], Response::HTTP_BAD_REQUEST);
        }

        // 保存文件到项目public/uploads目录
        $fileName = uniqid().'.'.$file->guessExtension();
        $file->move(
            $this->getParameter('kernel.project_dir').'/public/uploads',
            $fileName
        );

        return $this->json(['success' => true, 'file_path' => '/uploads/'.$fileName]);
    }
}

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