Phoenix中使用Arc、Arc_ecto上传图片

2019-01-07  本文已影响0人  aoners

用户CRUD写完后,给用户添加头像,折腾了好几天,图片也上传成功了,就是显示不出来。记录一下,也给elixir新手一个简单示例。
mix.exs文件的defp deps中添加以下两行

# 上传图片
{:arc, "~> 0.11.0"},
{:arc_ecto, "~> 0.11.1"}

然后执行

mix deps.get

config/config.exs 添加,示例是将图片上传到本地,没有使用云存储

config :arc,
          storage: Arc.Storage.Local

建立uploaders

mix arc.g avatar
* creating AppWeb/uploaders/avatar.ex
defmodule App.Avatar do
  # Include ecto support (requires package arc_ecto installed):
  use Arc.Definition
  use Arc.Ecto.Definition

  # To add a thumbnail version:
  @versions [:original, :thumb]

  # Whitelist file extensions:
  def validate({file, _}) do
    ~w(.jpg .jpeg .gif .png) |> Enum.member?(Path.extname(file.file_name))
  end

  # Define a thumbnail transformation:
  def transform(:thumb, _) do
    {:convert, "-strip -thumbnail 100x100^ -gravity center -extent 100x100"}
  end

  # Override the persisted filenames:
  def filename(version, _) do
    version
  end

  defp images_dir(user) do
    times = user.inserted_at
    "#{times.year}/#{times.month}/#{times.day}"
  end

  # Override the storage directory:
  def storage_dir(version, { _, scope }) do
    "users/avatars/#{images_dir(scope)}"
  end

  # Provide a default URL if there hasn't been a file uploaded
  def default_url() do
    "users/avatars/default.png"
  end
end

修改app/accounts/user.ex,添加带+号的三行代码

defmodule App.Accounts.User do
  use Ecto.Schema
  +use Arc.Ecto.Schema
  import Ecto.Changeset
  import Comeonin.Bcrypt

  alias App.Accounts.User

schema "users" do
    field :mobile, :string
    field :name, :string
    +field :avatar, Sky.Avatar.Type
    field :password, :string, virtual: true
    field :password_digest, :string
    field :age, :integer
    timestamps()
  end

def profile_changeset(%User{} = user, attrs) do
    user
    |> cast(attrs, [:name, :age])
    |> cast_attachments(attrs, [:avatar])
    |> validate_required([:name,])
    |> validate_length(:name, min: 2, max: 10)
    |> validate_inclusion(:age, 18..70)
  end

图片显示的问题,AppWeb/endpoint.ex的添加一项,记得不要覆盖掉原来的配置,是新增!!!

plug Plug.Static,
    at: "/", from: :sky, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)
  
  plug Plug.Static,
    at: "users", from: Path.expand('./users'), gzip: false

网页中显示图片

<img src="<%= App.Avatar.url({@current_user.avatar, @current_user}, :thumb) %>"/>
上一篇 下一篇

猜你喜欢

热点阅读