如何使用rails，angular＆paperclip將圖像上傳到S3

Question

我是Angular-Rails的新手，我想創建一個表單，其中有一個圖像附件可以上傳到AWS S3。我使用傳統方法成功上傳圖像（常規形式和回形針寶石）。

所以希望有人可以照亮我的問題。

這裏是我的軌控制器：

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 

這裏是我的角度控制器：

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); 
    }); 
    }; 

}]); 

這裏是我的角度視圖：

<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你可以將它直接上傳至回形針如下

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>