如何在Re-Frame/ClojureScript客户端应用中读取本地文件？

嘿，刚接触Re-Frame和ClojureScript就能搞到这一步已经很棒了！你遇到的C:\fakepath\...是浏览器的安全限制——为了保护用户本地文件系统，浏览器不会暴露真实路径，所以必须用原生的File API来读取文件内容，完全不用加新依赖，我来给你一步步讲怎么改：

1. 修改文件选择框的on-change回调 #

原来的代码只获取了文件的"伪路径"，现在我们要直接拿到浏览器提供的File对象，并用FileReader读取它的内容。修改后的input代码如下：

[:input {:class "file-input"
         :type "file"
         :on-change (fn [e]
                      ;; 获取选中的第一个文件（如果允许多选可以循环处理）
                      (let [selected-file (-> e .-target .-files (aget 0))]
                        (when selected-file
                          ;; 创建浏览器原生的FileReader实例
                          (let [reader (js/FileReader.)]
                            ;; 监听文件加载完成事件
                            (set! (.-onload reader)
                                  (fn [load-event]
                                    ;; 把文件名和内容一起dispatch给Re-Frame事件
                                    (re-frame/dispatch [::events/file-loaded
                                                        (.-name selected-file)
                                                        (.-result load-event)])))
                            ;; 可选：监听读取错误事件，处理异常情况
                            (set! (.-onerror reader)
                                  (fn [error-event]
                                    (re-frame/dispatch [::events/file-read-error
                                                        (.-name selected-file)
                                                        (.-error error-event)])))
                            ;; 以文本格式读取文件（如果是二进制文件可以换readAsArrayBuffer等）
                            (.readAsText reader selected-file)))))]

2. 注册对应的Re-Frame事件处理器 #

现在我们需要两个事件处理器：一个处理文件加载成功的情况，一个处理读取失败的情况（可选但很实用）：

;; 处理文件加载成功的事件
(re-frame/reg-event-db
 ::file-loaded
 (fn [db [_ file-name file-content]]
   ;; 更新数据库：存入文件名、内容，同时清除之前的错误信息
   (-> db
       (assoc :file-name file-name)
       (assoc :file-content file-content)
       (dissoc :file-read-error))))

;; 处理文件读取失败的事件（可选）
(re-frame/reg-event-db
 ::file-read-error
 (fn [db [_ file-name error]]
   ;; 更新数据库：记录文件名和错误信息，清除之前的内容
   (-> db
       (assoc :file-name file-name)
       (assoc :file-read-error (str "读取文件失败: " (.-message error)))
       (dissoc :file-content))))

3. 后续使用文件内容 #

现在你的Re-Frame数据库里已经有:file-content字段了，你可以在订阅器里获取它，比如：

(re-frame/reg-sub
 ::file-content
 (fn [db] (:file-content db)))

然后在视图里用@(re-frame/subscribe [::subs/file-content])拿到内容，进行后续的转换和导出操作。

关键点说明 #

• 全程用的是浏览器原生API（File、FileReader），不需要引入任何额外依赖，完全符合你的需求。
• 如果需要读取非文本格式的文件（比如图片、二进制），可以把.readAsText换成.readAsDataURL或.readAsArrayBuffer，对应处理.-result的格式即可。
• 如果你需要支持多选文件，只需要把(aget 0)改成循环遍历.-files数组，逐个dispatch事件即可。

内容的提问来源于stack exchange，提问作者de-narm