Vue中使用Filepond时serverId在updatefiles中显示undefined的求助

问题出在你直接给原生File对象添加serverId属性，但Filepond内部维护的是自己封装的FileItem实例，二者并非同一引用，导致后续无法从Filepond返回的文件项中获取到这个属性。

步骤1：修正process回调的写法 #

不需要手动给原生文件对象加属性，直接将服务器返回的serverId传给load方法的第二个参数，Filepond会自动把这个标识关联到对应的FileItem上：

mounted() {
setOptions({
  server: {
    process: (fieldName, file, metadata, load, error, progress, abort) => {
      const formData = new FormData();
      formData.append('mainData', file);
      createmainData(formData, {
        onUploadProgress: (event) => {
          progress(event.lengthComputable, event.loaded, event.total);
        }
      })
      .then(response => {
        const serverId = response.id;
        // 将serverId作为唯一标识传给load，Filepond会存储到对应的FileItem中
        load(response, serverId);
      })
      .catch(error => {
        console.log(error);
        error('Error uploading file');
      });
    },
  },
});
}

步骤2：在updatefiles中正确获取serverId #

updatefiles接收的files是Filepond的FileItem数组，直接访问每个item的serverId属性即可：

methods: {
  updatefiles(files) {
    // 修正变量名重复问题，正确提取serverId
    this.files = files.map(file => ({
      serverId: file.serverId,
      // 如需获取元数据，使用getMetadata方法
      metadata: file.getMetadata()
    }));
    console.log('files', files);
  },
},

关键说明 #

• process回调中的file是浏览器原生File对象，而updatefiles中的files是Filepond封装的FileItem实例，二者是不同的对象，直接修改原生File的属性不会同步到FileItem。
• 通过load(serverId)传递的标识，会被Filepond自动存储到FileItem.serverId属性中，这是官方推荐的关联服务器文件ID的方式。

内容的提问来源于stack exchange，提问作者ha-poom