如何使用 rails、angular 和回形针将图像上传到 S3

Question

我是 Angular-Rails 的新手，我想创建一个表单，其中包含上传到 AWS S3 的图像附件。我使用传统方法（普通格式和回形针 gem）成功上传了图像。

所以希望有人能阐明我的问题。

这是我的 rails 控制器：

class ProjectsController < ApplicationController
  before_action :set_project, only: [:show, :edit, :update, :destroy]

  # GET /projects
  # GET /projects.json
  def index
    render json: Project.all
  end

  # POST /projects
  # POST /projects.json
  def create

    @project = Project.new(project_params)
    if @project.save
      render json: @project
    else
      render json: @project.errors
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_project
      @project = Project.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def project_params
      params.require(:project).permit(:name, :description, :image)
    end
end

这是我的 angular 控制器：

app.controller('HomeCtrl', ['$scope','Upload',function($scope, Upload){

  // upload later on form submit or something similar
  $scope.submit = function() {
    if ($scope.form.file.$valid && $scope.file) {
      $scope.upload($scope.file);
    }
  };

  // upload on file select or drop
  $scope.upload = function (file) {
    Upload.upload({
        url: '/projects',
        data: {file: file, 'project[name]': $scope.name, 'project[description]': $scope.description},
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);

    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
  };

}]);

这是我的 angular 观点：

<form name="form">
  <input type="text" ng-model="name"><br />
  <input type="text" ng-model="description"><br />

  <div class="button" ngf-select ng-model="image" name="image" ngf-pattern="'image/*'"
      ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
      ngf-resize="{width: 100, height: 100}">Select</div><br />

  <button type="submit" ng-click="submit()">submit</button>

 </form>

这就是我得到的： image of what project returns

Answer 1

使用此指令上传文件https://github.com/mistralworks/ng-file-model/

它会把文件转换成base64.And你可以直接通过paperclip上传如下

   def create
    @project = Project.new(project_params)
    file = Paperclip.io_adapters.for(put base64 data of file)
    file.original_filename = "avatar_name"
    @project.image= file
     if @project.save
       render json: @project
     else
       render json: @project.errors
     end
   end

在控制器中添加要求base64

<form name="form">
   <input type="text" ng-model="name"><br />
   <input type="text" ng-model="description"><br />
   <input type="file" ng-file-model="image" name="image" />
   <button type="submit" ng-click="submit()">submit</button>
</form>

如何使用 rails、angular 和回形针将图像上传到 S3

How to upload images to S3 using rails, angular & paperclip

ruby-on-rails

amazon-s3

paperclip

angularjs