如何在 ClojureScript 中从 <input type='file' …/> 获取文件

Question

我试图在输入字段中获取图像文件，但我做不到。这是代码：

:on-change (fn [_]
             (this-as this
               (println "Files: " (.-files this))))

但是(.-files this)returns无.

有什么想法吗？

P.S: 我想上传这张图片到我的服务器。

Answer 1

你必须先从某处获取 dom 节点。在 React 世界中，this 可能不是 dom，因为它们是句法事件。

:on-change (fn [event]
             (let [dom  (goog.object/get event "target")
                   file (goog.object/getValueByKeys dom #js ["files" 0])]))

或者在 ClojureScript 中使用常规互操作形式：

:on-change (fn [event]
             (let [files (.. event -target -files) ; returns JS Array
                   file  (first files)]
               (do-something-with file)]))

https://reactjs.org/docs/handling-events.html

Answer 2

这是我们项目中的一个可行片段：

:on-change
(fn [this]
    (if (not (= "" (-> this .-target .-value)))
        (let [^js/File file (-> this .-target .-files (aget 0))]
          ;; your logic here ...
          ;; now reset the widget to let user upload a new one
          (set! (-> this .-target .-value) ""))))

希望这会有所帮助。

Answer 3

扩展 Albert 的回答（并且因为我的编辑被拒绝）：

而不是像下面那样使用 goog.object/get（在他的回答中使用 o/get）：

(let [dom  (goog.object/get event "target")
      file (goog.object/getValueByKeys dom #js ["files" 0])]))

您还可以在 ClojureScript 中使用常规互操作形式：

:on-change (fn [event]
             (let [files (.. event -target -files) ; returns JS Array
                   file  (first files)]
               (do-something-with file)]))

如何在 ClojureScript 中从 <input type='file' …/> 获取文件

How to get files from <input type='file' …/> in ClojureScript

clojure

clojurescript