FilePond设置storeAsFile:true时预填充图片报400错误问题

两个默认逻辑冲突导致报错和不符合预期的行为：

1. 未配置server.load时，FilePond默认没有直接拉取远程URL文件的处理逻辑，传入远程URL作为初始文件source时会直接抛400 (can't load URL)错误
2. 只要配置了全局server节点，FilePond就会默认启用服务端上传流程，直接覆盖storeAsFile: true的本地文件存储配置，所有新增文件都会自动发请求到配置的服务端地址，不会保留在本地input节点中。

不要配置全局server相关参数，仅针对预填充的初始文件单独定义加载逻辑：在初始文件的options中自定义load方法，提前把远程图片拉取转成原生File对象再交给组件，既可以正常加载预填充图片，又不会触发全局自动上传，完全保留storeAsFile: true的效果。

参考实现代码：

FilePond.create(inputElement, {
    "storeAsFile": true,
    "files": [
        {
            // source填文件唯一标识即可，比如文件名、文件ID
            "source": "dark.jpg",
            "options": {
                "type": "local",
                // 单文件自定义加载逻辑，不会影响全局配置
                "load": async () => {
                    // 拉取远程图片资源
                    const response = await fetch("http://localhost/products/storage/main/dark.jpg");
                    const imageBlob = await response.blob();
                    // 转成和本地选择一致的原生File对象返回
                    return new File([imageBlob], "dark.jpg", { type: imageBlob.type });
                }
            }
        }
     ]
});

方案说明 #

• 全程没有配置全局server参数，storeAsFile: true会正常生效，后续用户手动选择的新文件都会以原生File对象的形式挂载在原文件输入框上，不会自动发起上传请求
• 预填充的图片加载完成后和用户手动选择的文件行为完全一致，表单提交时会自动被包含在表单数据中，不需要额外做转换处理
• 如果预填充图片和页面不同域，需要图片存储服务配置对应CORS规则，允许当前页面域名拉取资源，否则fetch请求会被浏览器拦截。

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