首页 > 解决方案 > 通过链接 CarrierWave 和 Cloudinary,在 Ruby on Rails 中使用插入到 SummerNote 中的图像

问题描述

我正在使用 Ruby on Rails 创建一个 Web 应用程序。

我介绍 SummerNote 使文章创建表单用户友好。我们还为用户头像引入了 CarrierWave。我在生产中使用 Heroku。

但是,Heroku 将在 24 小时后删除图像。所以我添加了 Cloudinary 作为在 Heroku 上保存图像的插件。

但是插入到 SummerNote 文本字段中的图像被删除了。我遇到了麻烦,因为我不知道如何链接夏季笔记、载波和 Cloudinary。

有谁知道如何链接到 SummerNote 和载波和 Cloudinary?

我的代码

summernote-init.coffee

sendFile = (file, toSummernote) ->
  data = new FormData
  data.append 'upload[image]', file
  $.ajax
    data: data
    type: 'POST'
    url: '/uploads'
    cache: false
    contentType: false
    processData: false
    success: (data) ->
      img = document.createElement('IMG')
      img.src = data.url
      console.log data
      img.setAttribute('id', "sn-image-#{data.upload_id}")
      toSummernote.summernote 'insertNode', img      

deleteFile = (file_id) ->
  $.ajax
    type: 'DELETE'
    url: "/uploads/#{file_id}"
    cache: false
    contentType: false
    processData: false

$(document).on 'turbolinks:load', ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      lang: 'ja-JP'
      height: 400
      callbacks:
        onImageUpload: (files) ->
          sendFile files[0], $(this)
        onMediaDelete: (target, editor, editable) ->
          upload_id = target[0].id.split('-').slice(-1)[0]
          console.log upload_id
          if !!upload_id
            deleteFile upload_id
          target.remove()

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

  include Cloudinary::CarrierWave

  process :convert => 'png' 

end

uploaders_controller.rb

class UploadsController < ApplicationController
  def create
    @upload = Upload.new(upload_params)
    @upload.save

    respond_to do |format|
      format.json { render :json => { url: @upload.image.url, upload_id: @upload.id } }
    end
  end

  def destroy
    @upload = Upload.find(params[:id])
    @remember_id = @upload.id
    @upload.destroy
    FileUtils.remove_dir("#{Rails.root}/public/uploads/upload/image/#{@remember_id}")
    respond_to do |format|
      format.json { render :json => { status: :ok } }
    end
  end

  private

  def upload_params
    params.require(:upload).permit(:image)
  end
end

参考网站


我的错误

终端

Started POST "/uploads" for ::1 at 2020-05-19 13:46:50 +0900
Processing by UploadsController#create as */*
  Parameters: {"upload"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00007fc262966fc8 @tempfile=#<Tempfile:/var/folders/1v/z9ljm971349c50_qs5f5wy_h0000gn/T/RackMultipart20200519-19326-wz6m90.jpg>, @original_filename="jiyu.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"upload[image]\"; filename=\"jiyu.jpg\"\r\nContent-Type: image/jpeg\r\n">}}
   (0.1ms)  begin transaction
  SQL (0.5ms)  INSERT INTO "uploads" ("image", "created_at", "updated_at") VALUES (?, ?, ?)  [["image", "dtcgxdmlua3jd5ddxkpg.png"], ["created_at", "2020-05-19 04:46:50.050482"], ["updated_at", "2020-05-19 04:46:50.050482"]]
  SQL (0.1ms)  UPDATE "uploads" SET "image" = 'image/upload/v1589863584/dtcgxdmlua3jd5ddxkpg.png' WHERE "uploads"."id" = ?  [["id", 7]]
   (1.6ms)  commit transaction
Completed 200 OK in 1710ms (Views: 0.2ms | ActiveRecord: 2.4ms)


Started GET "/posts/null" for ::1 at 2020-05-19 13:46:51 +0900
Processing by PostsController#show as HTML
  Parameters: {"id"=>"null"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  Post Load (0.2ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ?  [["id", 0], ["LIMIT", 1]]
Completed 404 Not Found in 4ms (ActiveRecord: 0.6ms)



ActiveRecord::RecordNotFound (Couldn't find Post with 'id'=null):

我的本地主机

当我检查 Cloudinary 的仪表板时,图像已保存但未显示。

你能告诉我如何解决吗?或者我需要知道什么?

标签: ruby-on-railscarrierwavecloudinarysummernote

解决方案


推荐阅读