[英]Ecto: Casting %Plug.Upload to virtual field for file upload validations
[英]Why doesn't the file_input in the form on a Phoenix LiveView return a %Plug.Upload{}?
我在 Phoenix LiveView 中有一个表单,其中包含一个file_input
。 我想用它来允许用户上传图像。 我无法理解表单发送到我的后端的内容,以及我可以用它做什么。 我期望图像文件的 %Plug.Upload{} 表示,如文档中所述,但我只是得到"[object File]"
。
请注意,我没有使用变更集支持表单,因为我没有使用 Ecto:
<%= f = form_for :post, "#", phx_submit: :create_post, phx_change: :image_attach, multipart: true %>
<%= hidden_input f, :user_id, value: @current_user.account_id %>
<%= textarea f, :message, class: "social-post-box", placeholder: "Something on your mind?" %>
<div class="post-submit-container">
<%= submit "Post", class: "post-submit" %>
<label for="post_image" class="post-submit-image"></label
<%= file_input f, :image %
</div>
</form>
我在 LiveView 模块中有一个处理程序来处理提交的表单,当我检查图像上传时,我看到"[object File]"
def handle_event("create_post", %{"post" => post_params}, socket) do
IO.inspect post_params["image"]
{:noreply, socket}
end
我试着在这个位置撬,这样我就可以运行i post_params["image"]
,它解释了这个对象是一个位串,即只是一个二进制文件。 所以它实际上只是文本“[object File]”,甚至根本不是文件?
我从我的表格中收到了什么? 为什么不是%Plug.Upload{}
? 如何实现将上传的图片保存到本地文件系统的目标?
正如@sbacaro 指出的那样,LiveView 表单尚不支持文件上传。
更多信息:
我实现了一个 Javascript 解决方法来手动发送表单而不刷新页面(以便 LiveView 的其他部分继续正常运行)。
但是,Phoenix 在 LiveViews 中处理 CSRF 令牌的方式也存在问题。 事实证明,当套接字从客户端连接时,LiveView 会创建一个新令牌,并且该令牌不会被监听表单 POST 的控制器识别。 要解决此问题,您需要手动将令牌传递到 LiveView。
总体而言,这种解决方法工作正常,但我希望将来有一天有人会在这里指出文件上传已在 LiveViews 中获得支持并分享一种更简单的方法。
我的表格现在看起来像这样。 请注意 csrf 令牌的手动规范:
<%= f = form_for :post, Routes.profile_path(UdsWeb.Endpoint, :post_social, @current_user.username), [phx_change: :image_attach, multipart: true, id: "social-timeline-form", csrf_token: @csrf_token] %>
<%= hidden_input f, :user_id, value: @current_user.account_id %>
<%= textarea f, :message, class: "social-post-box", placeholder: "Something on your mind?" %>
<div class="post-submit-container">
<%= submit "Post", class: "post-submit" %>
<label for="post_image" class="post-submit-image"></label>
<%= file_input f, :image %>
</div>
</form>
我从一个普通的 eex 模板中渲染 LiveView。 请注意,我在这里手动指定了 csrf 令牌:
<%= Phoenix.LiveView.live_render(@conn, UdsWeb.ProfileTimelineLive, session: %{current_user: @current_user, csrf_token: Phoenix.Controller.get_csrf_token()}, container: {:div, class: "feed"}) %>
时间线模块有一个挂载函数,可以将 csrf 令牌加载到套接字分配中:
def mount(%{current_user: current_user, csrf_token: csrf_token}, socket) do
{:ok, assign(socket, current_user: current_user, csrf_token: csrf_token)}
end
用于手动控制表单提交的 JS 并不是很特别,但它是:
function handleSocialTimelinePost(e) {
e.preventDefault();
let form = document.querySelector("#social-timeline-form");
let formData = new FormData(form);
let username = formData.get("post[username]");
let request = new XMLHttpRequest();
request.open("POST", `/profile/${username}`);
request.send(formData);
}
document.querySelector("#social-timeline-form button.post-submit").onclick = handleSocialTimelinePost;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.