Question

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

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

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

有什么想法吗？

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

Answer 1

要扩展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)]))

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

你必须先从某个地方获取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

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

3 个答案: