Forge开发如何通过文件路径而非输入表单创建File对象
问题场景
绝大多数Forge示例通过文件输入表单获取输入文件,常规实现代码如下:
$("#inputFile").change(function () { _fileInputForm = this; if (_fileInputForm.files.length === 0) return; var file = _fileInputForm.files[0]; })
如果需要完全不依赖UI实现相同效果,常见参考写法如下:
const data = { ModelId: "dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLjNSTzhMWmtUVGVHM3p1M1FoNjRGM3c_dmVyc2lvbj0x", ElementId: [{ UniqueId: "ca5762b5-0f46-4a2f-8599-1d1a5dd19a81-00024b8c" }], }; var file = new File([data], "whatever.json", { type: "application/json" });
上述示例中的data是从whatever.json文件手动复制得到的,需要通过代码直接完成等价操作,不需要手动复制文件内容。
解决方法
之前的写法存在核心问题:直接将JS对象传入File构造函数时,构造函数会自动调用对象的toString()方法,最终写入文件的内容是"[object Object]",和实际JSON文件的内容完全不符,后续Forge逻辑读取文件时会报错。
正确实现只需要补全对象序列化步骤即可:
- 调用
JSON.stringify()将目标JS对象转为标准JSON格式字符串,如果需要和本地格式化后的JSON文件格式一致,可以传入缩进参数做格式化 - 将序列化后的字符串作为内容传入
File构造函数,指定正确的MIME类型,最终生成的File对象和文件表单选中本地JSON文件得到的对象完全等价,可以直接传入后续处理逻辑
完整可运行代码:
const data = { ModelId: "dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLjNSTzhMWmtUVGVHM3p1M1FoNjRGM3c_dmVyc2lvbj0x", ElementId: [{ UniqueId: "ca5762b5-0f46-4a2f-8599-1d1a5dd19a81-00024b8c" }], }; // 序列化为标准JSON字符串,null,2参数表示用2空格缩进格式化,不需要压缩格式可以保留 const fileContent = JSON.stringify(data, null, 2); // 构造和表单读取结果完全一致的File对象 const file = new File( [fileContent], "whatever.json", { type: "application/json", lastModified: Date.now() } );
验证方式:可以直接用
FileReader读取生成的file对象,得到的内容和手动选中本地whatever.json文件读取的结果完全一致,全程不需要渲染任何文件选择UI控件。
内容的提问来源于stack exchange,提问作者bim2016
相关产品推荐
相关产品推荐

