dayudodo (OldBoy)

2021 Rails-carrierwave 通过 api 上传音频实例

dayudodo — Sat, 21 Aug 2021 20:02:55 +0800

carrierwave 是 rails 中可以上传文件的工具库，虽然 rails 在 5.2 版本之后已经提供了 active storage，更安全、功能强大，但 carrierwave 用起来比较简单，适合小的项目。

本文要讲的是使用 api 来上传音频文件到 rails 服务器的办法。

carrierwave 官网地址

https://github.com/carrierwaveuploader/carrierwave

star: 8.6k

根据 ruby toolbox 统计，其在文件上传中排名第二，第一的 paperclip 已经停更了。

首先，在 Gemfile 中添加

gem 'carrierwave'

安装好

bundle install

生成一个音频上传类

rails generate uploader Soundfile

会保存在 app/uploaders/soundfile_uploader.rb 中，其内容如下：

class SoundfileUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
     "storage/#{model.class.to_s.underscore}/#{mounted_as}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add an allowlist of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  # def extension_allowlist
  #   %w(jpg jpeg gif png)
  # end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   if original_filename
  #     original_filename.force_encoding 'UTF-8'
  #   end
  # end
end

storage

指定了你要保存文档的位置，我是想把文件上传后保存到服务器中，所以 storage :file 并不需要改动。如果想保存到云存储中，请参考官方文档。

store_dir

里面你可以设置成自己想要保存的路径，其默认是保存在 public 目录下，类似于这样：public/storage/practice/文件名，这样上传之后是可以通过 url 来访问的，可以根据你自己的需求调整。也可以使用绝对路径，比如/home/user/storage，请确认你有对应的权限。

建立关联

我想给练习添加一个音频

rails g migration add_soundfile_to_practices soundfile:string
rails db:migrate

db/migrate/20210818034921_add_soundfile_to_practices.rb内容如下：

class AddSoundfileToPractices < ActiveRecord::Migration[6.0]
  def change
    add_column :practices, :soundfile, :string
  end
end

在 practice.rb 中建立关联

记得要使用 mount_uploader, 如果是多个文件，需要使用 mount_uploaders, 后面多个 S！

class Practice < ApplicationRecord
    belongs_to :user
    belongs_to :pth_sentence
    mount_uploader :soundfile, SoundfileUploader
end

Controller

app/controllers/practices_controller.rb中主要代码

def new
  @practice = Practice.new
end

def create
  @practice =  Practice.new(practice_params)
  if @practice.save
    render json: { status: 'success', msg: '创建成功' }
  else
    render :new
  end
end

def practice_params
  prms =
    params.require(:practice).permit(
      :user_id,
      :pth_sentence_id,
      :soundfile
    )
  # prms[:soundfiles].first.headers.force_encoding 'utf-8'
  prms
end

routes

routes.rb 中要有路由

resources :practices

测试 web 上传

如果你使用 web 上传，那么可以在 views 中这样来写（app/views/practices/_form.html.erb）：

<%= form_for(@practice) do |f| %>
  <%= f.text_field 'user_id' %>
  <%= f.text_field 'pth_sentence_id' %>
  <%= f.file_field :soundfile %>
  <%= f.submit %>
<% end %>

测试 API 上传

参数要组装成 rails 需要的格式，类名 [属性]，客户端我用的是 uniapp, 所以用 uniapp 来举例。

uni.uploadFile({
    url: `http://192.168.1.8:3000/practices`, 
    name: 'practice[soundfile]',
    filePath:this.voicePath,
    formData: {
        'practice[user_id]': 1,
        'practice[pth_sentence_id]': 30,
    },
    success: (uploadFileRes) => {
        console.log(uploadFileRes);
    },
    fail: (msg) => {
        console.log(msg.error)
    }
});

uniapp 提供了 uploadFile 的 API：

filePath 是要上传的文件名称
name 是参数名称，注意其写法为 practice[soundfile]，要与 model 中对应
其它参数写在 formData 中。

测试成功，文件已经上传到指定的目录中

观察后台，可以看到 soundfile 已经保存好了。

[1] pry(main)> u= User.find 6
  User Load (0.2ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 6 LIMIT 1
=> #<User id: 6, email: "c6@c6.com", created_at: "2021-08-18 03:25:59", updated_at: "2021-08-18 03:25:59", phone: "13317555983", name: "king1", title: nil>
[2] pry(main)> u.practices.last
  Practice Load (0.2ms)  SELECT `practices`.* FROM `practices` WHERE `practices`.`user_id` = 6 ORDER BY `practices`.`id` DESC LIMIT 1
=> #<Practice:0x00007f9c9c83dca0
 id: 8,
 user_id: 6,
 pth_sentence_id: 44,
 local_sound: nil,
 comment: nil,
 created_at: Thu, 19 Aug 2021 09:58:42 CST +08:00,
 updated_at: Thu, 19 Aug 2021 09:58:42 CST +08:00,
 soundfile: "07-最后他选择了后者_.mp3">

常见用法

可用 url

[4] pry(main)> u.practices.last.soundfile.url
  Practice Load (0.4ms)  SELECT `practices`.* FROM `practices` WHERE `practices`.`user_id` = 6 ORDER BY `practices`.`id` DESC LIMIT 1
=> "/storage/practice/soundfile/07-%E6%9C%80%E5%90%8E%E4%BB%96%E9%80%89%E6%8B%A9%E4%BA%86%E5%90%8E%E8%80%85_.mp3"

服务器路径

[5] pry(main)> u.practices.last.soundfile.current_path
  Practice Load (0.5ms)  SELECT `practices`.* FROM `practices` WHERE `practices`.`user_id` = 6 ORDER BY `practices`.`id` DESC LIMIT 1
=> "/home/study/funny_words/public/storage/practice/soundfile/07-最后他选择了后者_.mp3"

可能出现的错误

1, no implicit conversion of nil into String

使用 mount_uploaders, sssss, 复数！我恨复数，我恨复数，我恨复数。

2, Encoding::UndefinedConversionError "\xE6" from ASCII-8BIT to UTF-8

编码问题导致的，经分析，是 headers 中的 filename 编码有问题，见上图 (吐槽：外国人开发的工具总是容易产生国际化问题)，经搜索官网 issues，可能的解决办法如下。

1、application.rb 中添加 config.encoding = "utf-8"

2、在 practices_controller.rb 的 practice_params 中添加 prms[:soundfile].first.headers.force_encoding 'utf-8'

def practice_params
  prms =
    params.require(:practice).permit(
      :user_id,
      :pth_sentence_id,
      :soundfile
    )
  prms[:soundfile].headers.force_encoding 'utf-8'
  prms
end

这样就会把 headers 强制转成 utf-8 编码。

3, Can't verify CSRF token authenticity

使用 API 上传的时候，可能会遇到 CSRF 问题，这是为了防止一些网络攻击，可以通过在 application.rb 中添加

config.action_controller.default_protect_from_forgery = false

来关闭此项检查，这样开发时就方便喽。注意！在生产环境中要使用其它安全令牌比如 jwt 来进行合法用户校验。

运行环境

ruby 2.6.5, rails 6.0.4, mysql 5.7(utf8mb4)

快速搭建自定义域名的 Rails 5 HTTPS 开发服务器

dayudodo — Thu, 08 Feb 2018 16:38:50 +0800

https 已经是大势所趋，越来越多的 Web API 调用依赖 HTTPS 环境，苹果公司也要求其 ios App 强制使用 https。本人想写点个微信小程序玩下，发现也得用 https 才好使。微信小程序服务器只支持 https

研究了一下如何在 rails 开发的时候开启 https，最终发现使用 nginx 开启反向代理是最简单可行的办法，曾经试过用 rails s -b 'ssl://localhost:3000?key=path/to/file/localhost.key&cert=path/to/file/localhost.crt'来开启 https, 用倒是能用，就是后台错误一大堆。

本人开发环境

Rails 5.1.4
Mac OS X 10.12.5 (El Capitan)
OpenSSL 1.0.2l(brew install openssl)
nginx 1.12.2
Google Chrome 64.0.3282.140 (64-bit)

生成根证书

openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout server.key -out server.crt

填写有关项，想省事儿的话只需要填写 Common Name, 比如使用星号开头的*.blog.me。

Generating a 2048 bit RSA private key
..............+++
.........................................................................................+++
writing new private key to 'server.key'
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:*.blog.me
Email Address []:example@blog.me

会生成两个文件：证书文件 server.crt 和密钥文件 server.key，下面的 nginx 中会用到

设置 hosts 添加自定义域名

打开/etc/hosts 文件，添加此句：

127.0.0.1       1.blog.me

建议使用免费的 hosts 管理工具：SwitchHosts: 点击下载

启动 Rails 开发服务器

rails server -b 0.0.0.0 -p 3000

设置 nginx

安装 nginx: bash brew install nginx
修改 nginx 配置，配置文件位于：/usr/local/etc/nginx/nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
    # HTTPS server
    server {
        listen       4433;
        server_name  1.blog.me;

        ssl                  on;
        ssl_certificate      server.crt;
        ssl_certificate_key  server.key;
        ssl_session_timeout  5m;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers   on;

        location / {
          proxy_pass          http://127.0.0.1:3000;
          proxy_set_header    Host             $host;
          proxy_set_header    X-Real-IP        $remote_addr;
          proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
          proxy_set_header    X-Forwarded-Proto https;
        }
    }
    include servers/*;
}

其中的 HTTPS server 就是相关的 https 配置，端口号设置为 4433，因为默认的 443 是被 mac 系统屏蔽的。server_name 就填咱们的自定义域名：1.blog.me。ssl_certificate 对应的是证书文件，ssl_certificate_key 则是你的密钥文件。在 location 中的 proxy_pass 设置的是反向代理地址，也就是本机的 rails 开发服务器地址，其它照搬即可。配置好后建议使用 sudo nginx -t 测试下避免有写错的情况。

使用 brew services restart nginx 来重启 nginx！

信任证书

使用浏览器打开https://1.blog.me:4433 后会告诉你 authority invalid

此时打开 developer tools

点击 View certificate

拖动证书图标到桌面生成证书文件，并双击打开

设置始终信任，输入超级用户密码后确认

一切正常的话应该是这样：

小成功

通过 safari 来访问是 OK 的

chrome 会报错（老版本的 chrome 反倒不会）：

可以点击高级中的继续前往来访问网站，只是左边会显示不安全：

chrome 出错是因为其已经不再支持证书中的 commonName 匹配，实际上，自 2017 年 1 月起需要 subjectAltName 这个规则了。

解决办法

用根 SSL 证书来为本地自定义域名 1.blog.me 专门发行证书。创建 1.blog.me.csr.cnf 配置文件

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = 1.blog.me

用此配置 1.blog.me.csr.cnf 来创建证书密钥。该密钥存储在 1.blog.me.key

openssl req -new -sha256 -nodes -out 1.blog.me.csr -newkey rsa:2048 -keyout 1.blog.me.key -config <(cat 1.blog.me.csr.cnf)

Generating a 2048 bit RSA private key .....................................................+++ ....................................................................................................+++ writing new private key to '1.blog.me.key'

创建有 subjectAltName 的配置文件 v3.ext

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = 1.blog.me

创建域名证书：

openssl x509 -req -in 1.blog.me.csr -CA server.crt -CAkey server.key -CAcreateserial -out 1.blog.me.crt -days 500 -sha256 -extfile v3.ext

Signature ok subject=/C=US/ST=RandomState/L=RandomCity/O=RandomOrganization/OU=RandomOrganizationUnit/emailAddress=hello@example.com/CN=1.blog.me Getting CA Private Key

修改 nginx.conf 中的证书和密钥项：

...
        ssl_certificate      1.blog.me.crt;
        ssl_certificate_key  1.blog.me.key;
...

重启 nginx:

brew services restart nginx

Chrome 中再次打开：https://1.blog.me:4433 PERFECT！

优点

通过http://localhost:3000 也能访问本地开发服务器
puma 在 http 模式下更少出错
测试方便
真实的产品服务器也可以这样开启 https
开发服务器可以与产品服务器使用相同的域名（别忘了用 SwitchHost 切换），申请到的 SSL 证书也能用于开发 (好处是不需要添加信任)

Windows 下 Bundler::Fetcher::CertificateFailureError 出错的解决办法

dayudodo — Mon, 13 Nov 2017 11:49:13 +0800

安装新版本的 railsInstaller5.1.4 一切正常，等到 bundle install 的时候出现了这样的错误：

Retrying fetcher due to error (2/4): Bundler::Fetcher::CertificateFailureError Could not verify the SSL certificate for https://gems.ruby-china.org/.
There is a chance you are experiencing a man-in-the-middle attack, but most likely your system doesn't have the CA certificates needed for verification. For information about OpenSSL certificates, see http://bit.ly/ruby-ssl. To connect without using SSL, edit your Gemfile sources and change 'https' to 'http'.

google 后发现解决办法，需要个 carcert.pem 的文件，可以用下面的脚本自动下载此文件并加载到当前环境中，请先创建一个目录名称为：C:\RailsInstaller

require 'net/http'

# create a path to the file "C:\RailsInstaller\cacert.pem"
cacert_file = File.join(%w{c: RailsInstaller cacert.pem})

Net::HTTP.start("curl.haxx.se") do |http|
  resp = http.get("/ca/cacert.pem")
  if resp.code == "200"
    open(cacert_file, "wb") { |file| file.write(resp.body) }
    puts "\n\nA bundle of certificate authorities has been installed to"
    puts "C:\\RailsInstaller\\cacert.pem\n"
    puts "* Please set SSL_CERT_FILE in your current command prompt session with:"
    puts "     set SSL_CERT_FILE=C:\\RailsInstaller\\cacert.pem"
    puts "* To make this a permanent setting, add it to Environment Variables"
    puts "  under Control Panel -> Advanced -> Environment Variables"
  else
    abort "\n\n>>>> A cacert.pem bundle could not be downloaded."
  end
end

永久的解决办法是把变量 SSL_CERT_FILE 添加到环境变量中，如图：

或者你自己手动下载 carcert.pem 文件并设置好环境变量 (http://curl.haxx.se/ca/cacert.pem)，本文代码及方法参考自：(https://gist.github.com/fnichol/867550)