Тег изображения не работает в реакции при отправке пути изображения из рельса

Question

Это то, что я сделал во внешнем интерфейсе для отправки файла изображения.

handleFileChange = (event) => {
    const { name, value } = event.target
    const { organization } = this.state
    let reader = new FileReader()
    let file = event.target.files[0]
    reader.onload = () => {
      this.setState({
        organization: {
          ...organization,
          logo: file,
          logoFile: reader.result
        }
      })
    }
    reader.readAsBinaryString(file)
}

<input type="file"
     name="logo"
     onChange={this.handleFileChange} /> 

Это то, что я сделал в rails OrganizationsController, чтобы сохранить изображение в базе данных.

org = Organization.new(org_params)
org.logo = params[:organization][:logo].tempfile.path
if org.save
   render json: org
end 

Вот код для модели organization.rb

class Organization < ApplicationRecord
  mount_uploader :logoFile, LogoUploader
  validates :name, logo, presence: true
  validates :name, uniqueness: true  
end

При извлечении пути изображения из серверной части я получил следующий путь:

<img alt="" height='35px' width='37px' src="/var/folders/k3/k69tmr710wj_2vstx3rz01l80000gn/T/RackMultipart20180523-1093-1y543vo.png" />

С этим путем изображенияизображение не отображается в моем приложении.Но когда я вставляю этот путь в мой браузер, он отображает изображение с таким путем:

file:///var/folders/k3/k69tmr710wj_2vstx3rz01l80000gn/T/RackMultipart20180523-1093-1y543vo.png

Пожалуйста, помогите мне в решении этой проблемы.

Answer 1

  def get_image
    unless params[:file].blank?
      uploaded_io = params[:file]
      path = Rails.root.join("public/system/temp_files/images", uploaded_io.original_filename)
      File.open(path, 'wb') do |file|
        file.write(uploaded_io.read)
      end
      return path.to_s
    end
  end

У вас метод: -

    org = Organization.new(org_params)
    image_path = get_image
    org.logo = Rails.root.join('public', image_path.split('/public/')[1]).open)
   if org.save
     File.delete(image_path)
     render json: org
   end

Объяснение: -

1- Сначала вам нужно создать физический файл, чтобы сохранить его в вашей БД, поэтому здесь у меня естьсоздал временный файл в общедоступном каталоге проекта.

2- Просто напишите этот файл, используя временный путь к файлу в вашей базе данных.и после этого удалите этот временный физический файл

Answer 2

Когда вы звоните params[:organization][:logo].tempfile.path, вы получаете временный путь к файлу, прежде чем он будет загружен и сохранен где-нибудь в вашей системе, поэтому вам нужно загрузить изображение, а затем получить путь к изображению и затем выполнить

org.logo = uploaded_image_path

Вы можете использовать существующие решения для драгоценных камней, такие как carrierwave для обработки логики загрузки файлов.

У вас должен быть класс загрузчика для логотипа, например,

class LogoUploader < CarrierWave::Uploader::Base
  storage :file
end

Вы должны использовать класс загрузчика в вашем контроллере для загрузки изображения,

uploader = LogoUploader.new

uploader.store!(params[:your_file])

Я использую примеры со страницы github на сайте carrierwave, и он должен работать без особых хлопот.