7

ng-file-uploadとCarrierwaveを組み合わせて複数のファイルをアップロードしようとしていますが、サーバー側のコントローラーは 1 つのファイル (選択したファイルの最後の項目) しか受け取りません。

クライアント側（参照）

html

<button type="file" ng-model="files" ngf-select ngf-multiple="true">Upload</button>

js

var upload = function (files, content) {
    return Upload.upload({
        url: 'MY_CONTROLLER_URL',
        file: files, // files is an array of multiple files
        fields: { 'MY_KEY': 'MY_CONTENT' }
    }).progress(function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
        console.log('files ' + config.file.name + ' uploaded. Response: ' + data);
    }).error(function (data, status, headers, config) {
        console.log('error status: ' + status);
    });
};

console.log(files)Array[File, File, ...] を出力します(ブラウザ: FireFox)。したがって、クライアント側では、選択したファイルを取得します。ng-file-uploadのGitHubページでは、.html5

サーバー側（参考）

posts_controller.rb

def create
    @post = Post.new(post_params)
    @post.attaches = params[:file]
    @post.save
    render json: @post
end

private
def post_params
    params.require(:post).permit(:content, :file)
end

は@post.attaches投稿の添付ファイルで、 のパラメータparams[:file]によってクライアント側から送信されます。fileUpload.upload

ファイルの配列を に保存したいのですが、選択したファイルのうち 1 つのファイルしか含まれていません @post.attaches。プリント:params[:file]puts params[:file]

#<ActionDispatch::Http::UploadedFile:0x007fddd1550300 @tempfile=#<Tempfile:/tmp/RackMultipart20150812-2754-vchvln.jpg>, @original_filename="Black-Metal-Gear-Rising-Wallpaper.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"Black-Metal-Gear-Rising-Wallpaper.jpg\"\r\nContent-Type: image/jpeg\r\n">

これは、 にファイルが 1 つしかないことを示していますparams[:file]。このパラメーターの使用法に問題があるかどうかはわかりません。

どうすればこの問題を解決できますか?


これが私のpost.rbモデルであり、必要に応じて参照用に( carrierwaveattach_uploader.rbによって作成された):

post.rb

class Post < ActiveRecord::Base
    mount_uploaders :attaches, AttachUploader
end

attach_uploader.rb

class AttachUploader < CarrierWave::Uploader::Base
    storage :file
    def store_dir
        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end
end

データベースの@post.attaches列postsはによって追加されます

rails g migration add_attaches_to_posts attaches:json
4

1 に答える 1

1

私は最終的に私の問題を解決する方法を見つけました。Carrierwaveとdanialfaridのすばらしいng-file-upload に感謝します。

私の問題は、選択したすべてのファイルを送信できなかったことです。私の解決策は

var upload = function (files) {
    var names = [];
    for (var i = 0; i < files.length; ++i)
        names.push(files[i].name);
    return Upload.upload({
        url: '/api/v1/posts',
        file: files,
        fileFormDataName: names
    });
}

それから私のレールで controller.rb

file_arr = params.values.find_all { |value| value.class == ActionDispatch::Http::UploadedFile }

if @post.save
  unless file_arr.empty?
    file_arr.each { |attach|
      @attach = Attach.new
      @attach.filename = attach
      @attach.attachable = @post
      @attach.save
    }
  end
  render json: @post
end

からすべてのファイルを格納する配列を作成しましたparams。

mount_uploadersファイルの配列を保存するために、carrierwaveの列を使用しようとしましたが、うまくいきませんでした。attachesそこで、ファイルを保存するために呼び出されるファイル テーブルを作成します。

class CreateAttaches < ActiveRecord::Migration
  def change
    create_table :attaches do |t|
      t.string :filename
      t.references :attachable, polymorphic: true
      t.timestamps null: false
    end
  end
end

attachable投稿IDとタイプを保存するために使用されます。(ここで私の添付ファイルは、私のフォーラムの投稿に属しています。)


必要に応じて設定に関する詳細を次に示します

attach.rb（モデル）

class Attach < ActiveRecord::Base
  mount_uploader :filename, AttachUploader
  belongs_to :attachable, :polymorphic => true
end

post.rb（モデル）

class Post < ActiveRecord::Base
  has_many :attaches, as: :attachable, dependent: :destroy
end

post_serializer.rb

class PostSerializer < ActiveModel::Serializer
  has_many :attaches
end

attach_serializer.rb

class AttachSerializer < ActiveModel::Serializer
  attributes :url, :name

  def url
    object.filename.url
  end

  def name
    object.filename_identifier
  end
end

次に、htmlファイルに行コードを含めることができます

<div ng-repeat="attach in post.attaches">
    <img ng-src="{{attach.url}}" type="file" height="180" width="320" accept="image/*"/>
    <a target="_self" ng-show="attach.url" href="{{attach.url}}" download="{{attach.name}}">{{attach.name}}<p></p></a>
</div>

私のデフォルトの添付ファイルは画像に使用されます。

于 2015-08-17T04:43:40.047 に答える