文件上传无照片参数问题答案

【问题标题】：File Upload Nil Photo Params Issue文件上传无照片参数问题
【发布时间】：2014-06-24 16:52:30
【问题描述】：

我有一个 rails 4 应用程序，我在其中使用 jQuery File Upload 向 Carrierwave 发送请求。我的代码如下：

<input name='photo[image]' type='file' data-url='photos/create' multiple="true" class='fileupload'/>

和我的 jquery：

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        alert(file.name);
      });
    }
});

以及我在照片控制器中的创建操作：

def create
@photo = Photo.new(photo_params)

respond_to do |format|
  if @photo.save
    format.json { render json: @photo }
  else
    format.json { render json: @photo.errors, status: :unprocessable_entity }
  end
end
end

private
   def photo_params
     params.require(:photo).permit!
   end

和我的照片模型：

class Photo < ActiveRecord::Base
  mount_uploader :image, ImageUploader
end

当我创建照片时，carrierwave 正在正确创建图像（在 public/uploads 目录中），但由于某种原因，我的 jQuery 出现了错误：

Uncaught TypeError: Cannot read property 'length' of undefined

我不确定是什么原因造成的？

【问题讨论】：

你的web进程是否有足够的权限来写文件？
是的，我以前可以使用同一个网络应用上传照片。
您的网络服务器日志和/或 Rails 日志是否显示文件传输开始、进行、中断或完成？
只发布此操作失败的服务器日志。
看起来你完成的回调有问题尝试将返回的数据记录到控制台并向我们显示输出

标签： javascript jquery ruby-on-rails ruby file

【解决方案1】：

我应该把它作为评论留下，但我没有足够的声誉，所以我很抱歉。

我认为你只需要使用 data.files 而不是 data.result.files

喜欢这个

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
      $.each(data.files, function (index, file) {
        alert(file.name);
      });
    }
});

【讨论】：

【解决方案2】：

在我看来，您响应的 json 不具有 done 回调所期望的结构。由于它在data.result.files 上调用each，我认为响应的结构需要更像这样：

render json: {result: { files: [@photo] } }.

您也可以尝试通过在回调中将其记录到javascript控制台来调试返回的数据

done: function(e, data) { console.log(data) }

【讨论】：

【解决方案3】：

data 对象的结构将results 字段参数显示为一个对象，其中包含与文件无关的各种字段；所以data.result.files 导致.each() 出现错误

使用以下内容：

$.each(data.files, function (index, file) {
   alert(file.name);
});

Working Demo（去掉了服务端捕获Object的代码，修改上面的代码即可。）

【讨论】：

【解决方案4】：

首先 - 尝试探索您的参数。文件可能作为临时文件保存到 tmp，需要额外的移动/重命名操作

【讨论】：