如何在使用FilePond从服务器加载文件时修改input输入框值

你遇到的输入框显示非文件名内容的问题，核心原因是FilePond渲染已加载文件的输入框值时，默认读取文件对象的name字段作为显示内容，只要在加载文件时给name字段传入纯文件名即可，分两种常见场景处理：

• 初始化阶段传入服务端已有文件
  配置files参数时，不要把文件完整访问路径赋值给name字段，将文件服务端标识、访问地址存入serverId字段，name字段单独传提取好的文件名即可，参考代码：

// 初始化FilePond实例
const uploader = FilePond.create(document.querySelector('#fileUpload'), {
  files: [
    {
      // 文件服务端唯一标识、访问路径存在serverId，不要赋值给name
      serverId: '/storage/attachments/2024/quarterly-summary.xlsx',
      // name字段只传纯文件名，输入框将直接显示该值
      name: 'quarterly-summary.xlsx',
      size: 256000,
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    }
  ]
})

• 异步通过server.load接口加载文件
  自定义server.load请求逻辑时，拿到接口返回的文件信息后，先从完整路径中提取文件名，构造文件对象时把纯文件名赋值给name字段，再传给FilePond的load回调，参考代码：

const uploader = FilePond.create(document.querySelector('#fileUpload'), {
  server: {
    load: (fileId, load, error) => {
      // 请求服务端获取文件信息
      fetch(`/api/file/info?id=${fileId}`)
        .then(res => res.json())
        .then(fileInfo => {
          // 从文件完整路径中截取纯文件名
          const pureFileName = fileInfo.url.substring(fileInfo.url.lastIndexOf('/') + 1)
          // 传入构造好的文件对象，name字段使用纯文件名
          load({
            name: pureFileName,
            size: fileInfo.size,
            type: fileInfo.mimeType,
            source: fileInfo.url
          })
        })
        .catch(err => error('文件加载失败'))
    }
  }
})

• 异常排查：如果按上述配置后输入框仍然显示非文件名内容，检查是否自定义了文件项渲染钩子、输入框value赋值逻辑，不要在自定义逻辑中把完整路径写入输入框value即可。

内容的提问来源于stack exchange，提问作者Nguyễn Quang Minh