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

当您致电params[:organization][:logo].tempfile.path时，您正在获取文件的临时路径，然后将其上传并保存在系统中的某个位置，以便您需要上传图像，然后获取图像的路径，然后执行

org.logo = uploaded_image_path

您可以使用现有的gem解决方案（如carrierwave）来处理文件上传逻辑。

您应该拥有徽标的上传者类，

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

您需要使用控制器中的上传器类来上传图片

uploader = LogoUploader.new

uploader.store!(params[:your_file])

我正在使用来自carrierwave github页面的示例，它应该对您没有太多麻烦。

Answer 2

  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-只需使用数据库的临时文件路径写入此文件。然后删除此临时物理文件

从rails后端发送图像路径时，图像标记无效

2 个答案: