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

Question

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

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

但是 (.-files this)返回 nil 。

有什么想法？

P.S：我想将此图像上传到我的服务器。

Answer 1

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

: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 2

以扩展阿尔伯特的答案（并且因为我的编辑被拒绝）：

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

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

您也可以在clojurescript中使用常规Interop表单：

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

Answer 3

您必须首先从某个地方获取DOM节点。在React World中，this可能不是DOM，因为它们是句法事件。

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

或在clojurescript中使用常规Interop表单：

: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