F# Elmish-React项目中如何读取拖放文件内容

你拿到的file是浏览器原生File实例，直接调用Web标准的FileReader API就能读取内容，不需要额外引入第三方库，Fable绑定层已经对这套API做了完整封装。

实现注意事项 #

• 把e.preventDefault()、e.stopPropagation()的调用移到逻辑最前面，先阻止浏览器默认的拖放打开文件行为，避免触发页面跳转
• 加文件非空判断，兼容用户拖入非文件内容（比如拖入选中的网页文本）的边界场景
• FileReader的读取是异步操作，读取完成后必须通过dispatch发送Elmish消息，把内容传入update流程更新状态，不要直接在回调里修改外部可变状态
• 根据目标文件类型选择对应的读取方法：
  • 读取文本类文件（txt、json、源码文件）：用readAsText()
  • 读取二进制文件（图片、压缩包、音视频）：用readAsArrayBuffer()
  • 读取图片用于直接预览展示：用readAsDataURL()

完整代码示例 #

OnDrop (fun e ->
    // 先阻止默认行为
    e.preventDefault()
    e.stopPropagation()

    // 校验是否有拖入的文件
    if e.dataTransfer.files.length > 0 then
        let file = e.dataTransfer.files.item 0
        
        // 可选：前置校验文件类型、大小
        // if file.size > 10 * 1024 * 1024 then dispatch (FileError "文件大小不能超过10MB")
        // else if not (file.name.EndsWith(".txt")) then dispatch (FileError "仅支持上传txt文件")
        // else

        let reader = Browser.Dom.FileReader.Create()
        // 绑定读取完成回调
        reader.onload <- fun _ ->
            // 按读取方式做类型转换：文本/DataURL转string，二进制转byte[]/JS.ArrayBuffer
            let content = reader.result :?> string
            // 派发消息到Elmish更新流程
            dispatch (FileLoadSuccess content)
        // 绑定读取错误回调
        reader.onerror <- fun _ ->
            dispatch (FileLoadError "文件读取失败")
        
        // 执行读取，这里以读取文本文件为例，编码默认用UTF-8
        reader.readAsText(file)
)

提示：如果要读取超过100MB的大文件，不要直接全量读取，建议搭配file.slice()方法做分片读取，避免阻塞浏览器主线程造成页面卡顿。
如果写代码时提示找不到FileReader类型，确认项目已引用Fable.Browser.Dom包即可，标准Elmish.React项目模板默认会内置这个依赖。

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