redux-form 和 elixir/phoenix 作为后端 API 的文件附件（序列化问题）

Question

我的 elixir/phoenix 后端有两个 product 控制器。第一个 - API 端点 (pipe_through :api) 和第二个控制器 piping through :browser:

# router.ex
scope "/api", SecretApp.Api, as: :api do
  pipe_through :api

  resources "products", ProductController, only: [:create, :index]
end

scope "/", SecretApp do
  pipe_through :browser # Use the default browser stack

  resources "products", ProductController, only: [:new, :create, :index]
end

ProductController 处理来自 elixir 表单助手生成的表单的请求并接受一些文件附件。一切都很好。这是创建操作和此操作处理的参数：

def create(conn, %{"product" => product_params}) do
  changeset = Product.changeset(%Product{}, product_params)

  case Repo.insert(changeset) do
    {:ok, _product} ->
      conn
      |> put_flash(:info, "Product created successfully.")
      |> redirect(to: product_path(conn, :index))
    {:error, changeset} ->
      render(conn, "new.html", changeset: changeset)
  end
end

来自日志的参数（我正在使用 arc 来处理长生不老药代码中的图片上传）

[debug] Processing by SecretApp.ProductController.create/2
  Parameters: %{"_csrf_token" => "Zl81JgdhIQ8GG2c+ei0WCQ9hTjI+AAAA0fwto+HMdQ7S7OCsLQ9Trg==", "_utf8" => "✓", 
              "product" => %{"description" => "description_name", 
                "image" => %Plug.Upload{content_type: "image/png", 
                  filename: "wallpaper-466648.png", 
                  path: "/tmp/plug-1460/multipart-754282-298907-1"}, 
                "name" => "product_name", "price" => "100"}}
  Pipelines: [:browser]

Api.ProductController 处理来自 redux-from 的请求。下面是这个action处理的action,view,params:

# action in controller
def create(conn, %{"product" => product_params}) do
  changeset = Product.changeset(%Product{}, product_params)

  case Repo.insert(changeset) do
    {:ok, _product} ->
      conn
      |> render("index.json", status: :ok)
    {:error, changeset} ->
      conn
      |> put_status(:unprocessable_entity)
      |> render("error.json", changeset: changeset)
  end
end

# product_view.ex
def render("index.json", resp=%{status: status}) do
  %{status: status}
end

def render("error.json", %{changeset: changeset}) do
  errors = Enum.into(changeset.errors, %{})

  %{
    errors: errors
  }
end

[info] POST /api/products/
[debug] Processing by SecretApp.Api.ProductController.create/2
  Parameters: %{"product" => %{"description" => "product_description", "image" => "wallpaper-466648.png", "name" => "product_name", "price" => "100"}}
  Pipelines: [:api]
[info] Sent 422 in 167ms

创建操作失败，状态为 422，因为无法使用这些参数保存图像。我的问题是我无法从后端代码访问图像，我的 JS 代码中只有它作为 FileList 对象。我不明白如何将图像传递给后端代码。以下是此附件在我的 JS 代码中的表示方式（FileList，包含有关上传图片的信息）。

value:FileList
  0: File
    lastModified: 1381593256801
    lastModifiedDate: Sat Oct 12 2013 18:54:16 GMT+0300 
    name: "wallpaper-466648.png"
    size: 1787293
    type: "image/png"
    webkitRelativePath: ""

我只有 WebkitRelativePath（如果是第一个控制器，我有图像路径：“/tmp/plug-1460/multipart-754282-298907-1”）我不知道我能用这个 JS 对象做什么以及如何访问代表的真实图像通过这个 JS 对象（这里是关于文件上传的redux-form reference）。

你能帮帮我吗？如何向 elixir 解释如何找到图像？我只想使用 JS 代码将文件附件提交到我的后端（因为异步验证等有很多有趣的功能）。

这里是 link 到完整的 app 如果有帮助的话

Answer 1

从您的日志中可以清楚地看出图像正在从浏览器传输到控制器。

Phoenix 文档中的文件上传指南应该对您有所帮助： http://www.phoenixframework.org/docs/file-uploads

来自文档：

Once we have the Plug.Upload struct available in our controller, we can perform any operation on it we want. We can check to make sure the file exists with File.exists?/1, copy it somewhere else on the filesystem with File.cp/2, send it to S3 with an external library, or even send it back to the client with Plug.Conn.send_file/5.

我认为你的情况是上传的文件在进程结束时被删除，因为你没有将它的临时版本保存到其他地方。（我假设您还没有将它存储在数据库中。）我会在您验证变更集有效后将代码写入您的控制器中。

Answer 2

我终于解决了这个问题。解决方案是 redux-form 提交的参数的正确序列化。

这是我的 redux 表单，请求的起点：

// product_form.js

import React, { PropTypes } from 'react';
import {reduxForm} from 'redux-form';

class ProductForm extends React.Component {
  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    error: PropTypes.string,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired
  };

  render() {
    const {fields: {name, description, price, image}, handleSubmit, resetForm, submitting, error} = this.props;

    return (
      <div className="product_form">
        <div className="inner">
          <form onSubmit={handleSubmit} encType="multipart/form-data">
            <div className="form-group">
              <label className="control-label"> Name </label>
              <input type="text" className="form-control" {...name} />
              {name.touched && name.error && <div className="col-xs-3 help-block">{name.error}</div>}
            </div>

            <div className="form-group">
              <label className="control-label"> Description </label>
              <input type="textarea" className="form-control" {...description} />
              {description.touched && description.error && <div className="col-xs-3 help-block">{description.error}</div>}
            </div>

            <div className="form-group">
              <label className="control-label"> Price </label>
              <input type="number" step="any" className="form-control" {...price} />
              {price.touched && price.error && <div className="col-xs-3 help-block">{price.error}</div>}
            </div>

            <div className="form-group">
              <label className="control-label"> Image </label>
              <input type="file" className="form-control" {...image} value={ null } />
              {image.touched && image.error && <div className="col-xs-3 help-block">{image.error}</div>}
            </div>

            <div className="form-group">
              <button type="submit" className="btn btn-primary" >Submit</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

ProductForm = reduxForm({
  form: 'new_product_form',
  fields: ['name', 'description', 'price', 'image']
})(ProductForm);

export default ProductForm;

此表单在用户按下按钮 "Submit"

后将以下参数传递给函数 handleSubmit

# values variable
Object {name: "1", description: "2", price: "3", image: FileList}

# where image value is 
value:FileList
  0: File
    lastModified: 1381593256801
    lastModifiedDate: Sat Oct 12 2013 18:54:16 GMT+0300 
    name: "wallpaper-466648.png"
    size: 1787293
    type: "image/png"
    webkitRelativePath: ""

为了将这些参数传递给后端，我正在使用 FormData Web API and the file-upload request using isomorphic-fetch npm module

下面是代码：

// product_form_container.js (where form submit processed, see _handleSubmit function)

import React                   from 'react';
import ProductForm             from '../components/product_form';
import { Link }                from 'react-router';
import { connect }             from 'react-redux';
import Actions                 from '../actions/products';
import * as form_actions            from 'redux-form';
import {httpGet, httpPost, httpPostForm} from '../utils';

class ProductFormContainer extends React.Component {
  _handleSubmit(values) {
    return new Promise((resolve, reject) => {
      let form_data = new FormData();

      Object.keys(values).forEach((key) => {
        if (values[key] instanceof FileList) {
          form_data.append(`product[${key}]`, values[key][0], values[key][0].name);
        } else {
          form_data.append(`product[${key}]`, values[key]);
        }
      });

      httpPostForm(`/api/products/`, form_data)
      .then((response) => {
        resolve();
      })
      .catch((error) => {
        error.response.json()
        .then((json) => {
          let responce = {};
          Object.keys(json.errors).map((key) => {
            Object.assign(responce, {[key] : json.errors[key]});
          });

          if (json.errors) {
            reject({...responce, _error: 'Login failed!'});
          } else {
            reject({_error: 'Something went wrong!'});
          };
        });
      });
    });
  }

  render() {
    const { products } = this.props;

    return (
      <div>
        <h2> New product </h2>
        <ProductForm title="Add product" onSubmit={::this._handleSubmit} />

        <Link to='/admin/products'> Back </Link>
      </div>
    );
  }
}

export default connect()(ProductFormContainer);

其中 httpPostForm 是 fetch 的包装：

export function httpPostForm(url, data) {
  return fetch(url, {
    method: 'post',
    headers: {
      'Accept': 'application/json'
    },
    body: data,
  })
  .then(checkStatus)
  .then(parseJSON);
}

就是这样。我的长生不老药代码没有什么可以修复的，Api.ProductController 保持不变（见初始 post）。但现在它收到带有以下参数的请求：

[info] POST /api/products/
[debug] Processing by SecretApp.Api.ProductController.create/2
  Parameters: %{"product" => %{
                "description" => "2", 
                "image" => %Plug.Upload{
                  content_type: "image/jpeg",
                  filename: "monkey_in_jungle-t3.jpg", 
                  path: "/tmp/plug-1461/multipart-853391-603088-1"
                }, 
               "name" => "1", 
               "price" => "3"}}
  Pipelines: [:api]

非常感谢所有试图帮助我的人。希望这可以帮助遇到类似序列化问题的人。

redux-form 和 elixir/phoenix 作为后端 API 的文件附件（序列化问题）

File attachments for redux-form and elixir/phoenix as backend API (serialization issue)

file

elixir

reactjs

redux

redux-form