Question

我正在尝试将Dropzone.js实现为用户脚手架的拖放配置文件照片上传器

在我的ruby on rails上，我创建了user脚手架，它有一张个人资料照片（实现由PaperClip处理）。

我想创造一种体验

用户编辑同一页面上的所有详细信息（包括个人资料照片）
在编辑/用户/ x页面的第一次加载时加载当前图像;
当用户将图像放在表单部分上时，图像将呈现为预览。
如果您点击取消，您的上一张图片将会恢复。

我提出的方法是创建一个临时Uploads表，用于存储丢弃到Dropzone中的所有图像/文件。成功上传后，它会将图像的id返回到表单，然后一旦用户单击“保存”，图像的ID将与表单一起发布，并且将创建用户和图像之间的链接。

我有两个关于堆栈溢出社区的问题：

我是否过度复杂化了这种方法？
我收到以下错误： ActionController::ParameterMissing (param is missing or the value is empty: Upload):我做错了什么？

我到目前为止的代码概述如下。

感谢任何帮助。

<%= form_with(model: user, local: true) do |form| %>
<div class="form-group">
    <% if user.errors.any? %>
      <div id="error_explanation" class="row">
        <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
        <ul>
        <% user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
        </ul>
      </div>
    <% end %>
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :user_name, :class=> "form-control" %>
  </div>
  <div id="profile-photo" class="field dropzone">
    <%= form.file_field :profile, :class=> "fallback"%>
  </div>

  <div class="field">
    <%= form.label :role %>
    <%= form.text_field :role, id: :user_role, :class=> "form-control" %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
</div>
<% end %>

我有以下JavaScript

 $("#profile-photo").dropzone({
      url: '/uploads/upload',
      maxFiles: 1,
      maxfilesexceeded: function(file) {
          this.removeAllFiles();
          this.addFile(file);
      },
      success: function(file, response){
        alert("upload was successful");
      }
    });

以下Controller＃Action

# POST /uploads
    # POST /uploads.json
    def upload
      puts request.request_parameters
      @upload = Upload.new(upload_params)

        if @upload.save
           puts @upload.id
      #     format.html { redirect_to @upload, notice: @upload.id }
      #     format.json { render :show, status: :created, location: @upload }
          else
      #     format.html { render :new }
      #     format.json { render json: @upload.errors, status: :unprocessable_entity }
        end
    end

    def upload_params
      params.require(:Upload).permit(:photo)
    end

我的request.request_parameters如下所示：

Parameters: {"file"=>#<ActionDispatch::Http::UploadedFile:0x007f8fe120b278 @tempfile=#<Tempfile:/var/folders/rp/79zzx36504z9kp7srj55pxk80000gn/T/RackMultipart20170804-3814-13pid57.jpg>, @original_filename="tokyo.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"tokyo.jpg\"\r\nContent-Type: image/jpeg\r\n">}

Answer 1

我怀疑这与dropzone.js文件用作paramName有关。如果打开dropzone.js文件，您将看到paramName值默认为'file'。

尝试更新此行，使其内容如下：

paramName: 'user[profile]'（或者，但是您已经设置了用户模型的文件字段属性，我只是从您的帖子中推断出这一点，在这里可能有误）

例如，在我的情况下，“图片”表中有一个名为“文件”的列，该列是上传图片的位置。一旦我将paramName更改为'image [file]'，所有内容就会按预期开始工作，并且使用POST请求适当填充了强参数。

Dropzone.js ActionController :: ParameterMissing个人资料图片上传

1 个答案: