如何在带有 AJAX 的 ruby​​ on rails 中使用cropperJS上传图像？

编程问答 2022-04-29

问题描述

我正在使用cropper js。当我尝试使用cropper js 更新照片时，它返回#<User::ActionsController::FileObjectIO:0x007f82482c1808> 它应该是显示的数据库中的文件名。如果我错过了什么，请告诉我。

JS

$(document).on('click','#crop-photo-submit',function() {
canvas = cropper.getCroppedCanvas({
  width: 360,height: 200,});

canvas.toBlob(function(blob) {
  url = URL.createObjectURL(blob);
  reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = function() {

    var blog_id = readCookie('blog_id');
    var blog_data = {
      title: $('#cdata-title').val(),author: $('#cblog-author-name').val(),category: $('#cblog-category').val(),// website: $(form).find('#data-website').val(),description: CKEDITOR.instances['data_description_c'].getData(),date: $('#cblog-date').val(),time: $('#cdata-time').val(),video_link: $('#cdata-video-link').val(),today: moment().format('LLL'),cover2: {base64: reader.result,filename: "cover"},}

    $.ajax({
      url: "/user/blog/update/" + blog_id,type: "POST",beforeSend: function(xhr){
        xhr.setRequestHeader('X-CSRF-Token',$('Meta[name="csrf-token"]').attr('content'))
      },data: { blog: blog_data },error: function(data){
        alert("error upload image");
      },success: function(data){
        alert("success upload image");
      }
    });
  };
});
});

控制器

def update_blog
user = current_user

if !user.bloggers.first.present?
  return render json: { message: "Please configure blogger profile to enable blog update." },status: 403
end

blog = user.blogs.find_by_id params[:id].to_i

if blog == nil
  return render json: { message: "Blog not found!" },status: 404
end

blog.title = params[:blog][:title]

blog.blogger_id = params[:blog][:author].to_i
blog.category = params[:blog][:category]
blog.description = params[:blog][:description]

blog.date_post = parse_date(params[:blog][:date],params[:blog][:time])

if params[:blog][:cover2].present?
  blog.cover2 = build_file_obj base64: params[:blog][:cover2][:base64],filename: params[:blog][:cover2][:filename]
end

if blog.valid? && blog.save
  return render json: { message: "Blog updated!",blog: blog },status: 200
else
  return render json: { message: "Something went wrong! Please try again later" },status: 500
end
end

请帮我解决这个问题。我唯一的问题是ajax数据中的参数cover2。 Ajax Success时，数据库中的cover2名称不对，应该是文件名。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxcropperjsruby-on-rails