10

在我的 Ruby on Rails 应用程序中，我有一个简单的文件上传按钮，我试图用 HTML5 中的 File/FileReader API 的拖放框替换它，特别是使用本教程。照原样，我使用 Ruby 脚本将文件上传到我的 public/data 文件夹。我不确定如何将拖放脚本与之集成。我的想法是制作我已经隐藏的文件上传按钮，并在用户尝试提交时使用 Javascript 将其值设置为拖放图像的路径。

但是，当我尝试提交时，出现错误：

文件名太长 - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNj....

因为HTML5给出的临时文件存储名称太长了，我猜。

我尝试将字符串连接到前 60 个字符，然后它给出了错误：

没有这样的文件或目录 - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAA

在任何情况下，该文件都不会添加到public/data文件夹中。

我的 HTML：

<%= form_tag( { :action => 'create' }, :multipart => true ) %>
<div id="dropbox"><span id="droplabel">Drop file here...</span></div>
<img id="preview" alt="[ preview will display here ]" />

<%= hidden_field_tag :uploadfile, :id => "uploadfile", :name => "uploadfile" %>
<br /><br />
<div id="submit">
<%= submit_tag( "Upload file" ) %>
</div>

红宝石：

def create
    name = params[:uploadfile]
    directory = "public/data"
    path = File.join(directory, name)
    File.open(path, "wb") { |f| f.write(params[:uploadfile].read) }
     @project = Project.new({:filename => name, :location => path})

    respond_to do |format|
      if @project.save
        format.html { redirect_to @project, notice: 'Project was successfully created.' }
        format.json { render json: @project, status: :created, location: @project }
      else
        format.html { render action: "new" }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end

和JS：

$("#submit input").click(function() {
    $("#uploadfile").val($("#preview").attr("src"));
});
4

2 回答 2

1

问题看起来像您将文件作为 Base64 编码的数据 URL 发送，这很好，但是当您 POST 到服务器时文件名不会随之而来。您可能希望在将文件转换为数据 URL 之前提取文件名，以便您可以将其与参数中的文件一起发送。或者，像 Madao 建议的那样创建一个新的文件名 (UUID)。

这至少应该解决您的文件名问题：

def create
    ##
    file = params[:uploadfile]
    name = params[:filename] || SecureRandom.uuid
    ##
    directory = "public/data"
    path = File.join(directory, name)
    File.open(path, "wb") { |f| f.write(file.read) }
    @project = Project.new({:filename => name, :location => path})

    respond_to do |format|
      if @project.save
        format.html { redirect_to @project, notice: 'Project was successfully created.' }
        format.json { render json: @project, status: :created, location: @project }
      else
        format.html { render action: "new" }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end
于 2018-02-01T01:10:45.173 回答
0

关键是使用 params[:uploadfile] 作为 name 值是不必要的，如果你想要一个唯一的键，你可以使用SecureRandom.uuid.

于 2017-07-24T10:14:42.927 回答