我对 Rails 有点陌生,我正在尝试使用 Shrine 将图像直接上传到 S3。我直接上传到 S3 以完美工作,但是,当我引入 jquery 文件上传并上传图像时,chrome 控制台向我抛出了 这个错误 。我不确定我做错了什么,我似乎无法在网上的任何地方找到解决方案。我知道这是一个预兆错误,它可能找不到缓存链接,但我不知道如何解决。
编辑:通过在 Routes 文件中包含 presign 代码并将 uploads.js 中的存储位置更改为正确的位置来解决此问题。但是,现在我遇到了文件在尝试上传时被回滚的问题。
我正在使用基于云的 ide C9,
这是我的 uploads.js 文件:
$(document).on("turbolinks:load", function(){
$("[type=file]").fileupload({
add: function(e, data) {
console.log("add", data);
data.progressBar = $('<div class="progress"><div class="determinate"
style="width: 70%"></div></div>').insertBefore("form")
var options = {
extension: data.files[0].name.match(/(\.\w+)?$/)[0], //set the
file extention
_: Date.now() //prevent caching
};
$.getJSON("/autos/upload/cache/presign", options, function(result) {
console.log("presign", result);
data.formData = result['fields'];
data.url = result['url'];
data.paramName = "file";
data.submit()
});
},
progress: function(e, data) {
console.log("progress", data);
var progress = parseInt(data.loaded / data.total * 100, 10);
var percentage = progress.toString() + '%'
data.progressBar.find(".progress-bar").css("width",
percentage).html(percentage);
},
done: function(e, data) {
console.log("done", data);
data.progressBar.remove();
var image = {
id: data.formData.key.match(/cache\/(.+)/)[1], // we have to
remove the prefix part
storage: 'cache',
metadata: {
size: data.files[0].size,
filename: data.files[0].name.match(/[^\/\\]+$/)[0], // IE return full
path
mime_type: data.files[0].type
}
}
form = $(this).closest("form");
form_data = new FormData(form[0]);
form_data.append($(this).attr("name"), JSON.stringify(image))
$.ajax(form.attr("action"), {
contentType: false,
processData: false,
data: form_data,
method: form.attr("method"),
dataType: "json"
}).done(function(data) {
console.log("done from rails", data);
});
}
});
});
我的 routes.rb 文件包括:
mount ImageUploader::UploadEndpoint => "/images/upload"
mount Shrine.presign_endpoint(:cache) => "/autos/upload/cache/presign"
我有一个模型,它接受这些图像以及其他称为 Autos 的字段,这包含在 Autos 文件中:
include ImageUploader[:image]
我的汽车控制器是:
class AutosController < ApplicationController
before_action :find_auto, only: [:show, :edit, :update, :destroy]
def index
@autos = Auto.all.order("created_at DESC")
end
def show
end
def new
@auto = current_user.autos.build
end
def create
@auto = current_user.autos.build(auto_params[:auto])
if @auto.save
flash[:notice] = "Successfully created post."
redirect_to autos_path
else
render 'new'
end
end
def edit
end
def update
if @auto.update(auto_params[:auto])
flash[:notice] = "Successfully updated post."
redirect_to auto_path(@auto)
else
render 'edit'
end
end
def destroy
@auto.destroy
redirect_to autos_path
end
private
def auto_params
params.require(:auto).permit(:title, :price, :description, :contact, :image, :remove_image)
end
def find_auto
@auto = Auto.find(params[:id])
end
end