如何用FilePond上传文件而非Blob？解决文件名丢失问题

核心问题 #

FilePond加载服务器已存在的文件时，默认会将其转为Blob对象提交，导致原文件名丢失。以下提供两种可行的解决思路：

方案一：仅提交新增文件，旧文件通过隐藏字段传递（推荐） #

这种方式避免重复上传已存在的文件，更高效：

1. 添加隐藏字段存储旧文件标识
   在视图中新增隐藏输入框，保存用户需要保留的旧文件名（或文件ID）：

   <input type="hidden" id="existingFiles" name="existingFiles" value="@string.Join(",", Files.Select(f => f.filename))" />
   

   这里的Files是控制器传递的旧文件数组，提取文件名用逗号拼接后存入字段。

2. 配置FilePond仅处理新增文件
   修改FilePond配置，禁用已加载文件的自动提交逻辑：

   pond = FilePond.create(document.querySelector('.filepond'), {
       acceptedFileTypes: ['image/*'],
       allowMultiple: true,
       server: {
           url: UrlFoder,
           process: 'upload-file',
           revert: null,
           load: '',
           restore: null,
           fetch: null
       },
       files: Files,
       // 关键：自定义处理逻辑，仅上传新增文件
       process: (fieldName, file, metadata, load, error, progress, abort) => {
           // 仅处理非服务器加载的新增文件
           if (!file.serverId) {
               const formData = new FormData();
               formData.append(fieldName, file, file.name);
               fetch(`${UrlFoder}/upload-file`, {
                   method: 'POST',
                   body: formData
               }).then(response => response.json())
                 .then(data => load(data.id))
                 .catch(err => error('上传失败'));
           } else {
               // 旧文件直接标记为处理完成
               load(file.serverId);
           }
       }
   });
   

3. 控制器接收并处理数据
   同时接收新增文件和旧文件标识：

   [HttpPost]
   public IActionResult YourAction(IFormFileCollection files, string existingFiles)
   {
       // 处理新增文件
       foreach (var file in files)
       {
           // 执行新增文件的上传/存储逻辑
       }
       // 处理保留的旧文件：分割字符串获取文件名列表
       var existingFileNames = existingFiles?.Split(',') ?? Array.Empty<string>();
       // 对比服务器文件，删除未被保留的文件
       return Ok();
   }
   

方案二：配置FilePond保留原文件元信息提交 #

若必须将旧文件和新文件一起以文件形式提交，可通过以下方式保留原文件名：

1. 构建符合要求的Files数组
   控制器传递的Files数组需包含原文件的元信息：

   var Files = existingImages.Select(img => new {
       source = img.FilePath, // 服务器文件路径或访问URL
       options = new {
           type = "local",
           file = new {
               name = img.FileName, // 原文件名
               type = img.ContentType // 文件MIME类型
           }
       }
   }).ToList();
   

2. 修改FilePond加载逻辑
   自定义文件加载方法，手动设置Blob的文件名：

   pond = FilePond.create(document.querySelector('.filepond'), {
       acceptedFileTypes: ['image/*'],
       allowMultiple: true,
       server: {
           url: UrlFoder,
           process: 'upload-file',
           revert: null,
           load: (source, load, error) => {
               fetch(source)
                   .then(response => response.blob())
                   .then(blob => {
                       // 从URL提取原文件名并赋值给Blob
                       blob.name = source.split('/').pop();
                       load(blob);
                   })
                   .catch(err => error('文件加载失败'));
           },
           restore: null,
           fetch: null
       },
       files: Files
   });
   

3. 控制器获取原文件名
   此时提交的文件会携带原文件名，直接通过file.FileName获取：

   [HttpPost]
   public IActionResult YourAction(IFormFileCollection files)
   {
       foreach (var file in files)
       {
           var originalFileName = file.FileName;
           // 执行文件处理逻辑
       }
       return Ok();
   }
   

注意事项 #

• 优先选择方案一，减少不必要的文件上传，节省服务器资源和带宽。
• 测试时可通过浏览器开发者工具查看FormData内容，确认文件名是否正确传递。

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