jQuery 文件上传“错误 - 空文件上传结果” - Rails 应用程序

Question

我不明白为什么会出现此错误？我已经从源代码示例中完全复制了。我能够加载所有内容，然后当我尝试上传（通过单击开始）时，我收到此错误。

但即使我收到此错误，它仍然会正确上传到我的数据库。当我刷新我的页面时，我有一个显示页面，它将显示上传的图像，它就在那里。是什么导致了这个问题？

请帮忙！我也在使用回形针上传。在我的环境中，我在本地上传，但在生产环境中，我正在上传到 Amazon S3

这是我的控制器在创建或更新表单时的样子。

def create
  @project = Project.new(project_params)

  respond_to do |format|
    if @project.save

      if params[:photos]
        params[:photos].each { |image|
          @project.project_images.create(photo: image)
        }
      end
      format.html { redirect_to @project, notice: 'Project was successfully created.' }
      format.json { render :show, status: :created, location: @project }
    else
      format.html { render :new }
      format.json { render json: @project.errors, status: :unprocessable_entity }
    end
  end
end

def update
  @project = current_user.projects.find(params[:id])

  respond_to do |format|
    if @project.update(project_params)

     if params[:photos]
        params[:photos].each { |image|
          @project.project_images.create(photo: image)
        }
      end     

      format.html { redirect_to @project, notice: 'Project was successfully updated.' }
      format.json { render :show, status: :ok, location: @project }
    else
      format.html { render :edit }
      format.json { render json: @project.errors, status: :unprocessable_entity }
    end
  end
end

编辑：

这是我的表格

<%= simple_form_for @project, html: { multipart: true, id: 'fileupload' } do |f| %>

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input type="file" name="photos[]" id='photo_upload_btn', multiple>
</span>
<button type="submit" class="btn btn-primary start">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
    <i class="glyphicon glyphicon-ban-circle"></i>
    <span>Cancel upload</span>
</button>

<% end %>

编辑：

jQuery 代码

<script>
$(function () {

    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload();
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},     
    });
    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});
    });
});
</script>

<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>

Answer 1

jQuery File Upload 已指定 JSON 响应 mentioned here。

扩展您的 create 方法以返回类似于以下输出的 JSON 响应：

 {"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "url": "http:\/\/example.org\/files\/picture1.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
    "deleteType": "DELETE"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "url": "http:\/\/example.org\/files\/picture2.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
    "deleteType": "DELETE"
  }
]}

同样在出错的情况下，只需将错误属性添加到单个文件对象：

{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "error": "Filetype not allowed"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "error": "Filetype not allowed"
  }
]}

最简单的方法是将以下代码添加到您的照片模型see here

  def to_jq_upload
    {
      "name" => read_attribute(:attachment_file_name),
      "size" => read_attribute(:attachment_file_size),
      "url" => attachment.url(:original),
      "thumbnailUrl" => attachment.url(:thumb),
      "deleteUrl" => "/photos/#{self.id}",
      "deleteType" => "DELETE" 
    }
  end

你的 JSON 响应应该是这样的see here

format.json { render json: {files: [@photo.to_jq_upload] }}