角4つのレール5のクリップファイルのアップロード

Question

私はAngular 4フロントエンドとRails 5 apiバックエンドを使ってプロジェクトを進めています。クリップを使ってビデオをアップロードしようとしていますが、なぜそれがデータベースに保存されていないのかわかりません。すべてのパラメータはログに保存され、保存されません。私はコントローラを変更してrequire文を取り出し、フロントエンドコードのサーバ時間をリファクタリングしました。私が働いていない様々な情報源から試したサーバ技術があります。私は正確に何が起こっているかについて空白を描いています。どんな入力も非常に高く評価されます。

これはイム

I, [2017-11-22T19:21:10.984681 #5898] INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Started POST "/movies" for 108.71.214.220 at 2017-11-22 19:21:10 +0000 
I, [2017-11-22T19:21:11.001990 #5898] INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Processing by MoviesController#create as HTML 
I, [2017-11-22T19:21:11.002088 #5898] INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Parameters: {"video"=>#<ActionDispatch::Http::UploadedFile:0x000055a94d4e5970 @tempfile=#<Tempfile:/tmp/RackMultipart20171122-5898-17o86vd.mp4>, @original_filename="SampleVideo_720x480_1mb.mp4", @content_type="video/mp4", @headers="Content-Disposition: form-data; name=\"video\"; filename=\"SampleVideo_720x480_1mb.mp4\"\r\nContent-Type: video/mp4\r\n">, "title"=>"Test Movie", "year"=>"1998", "plot"=>"Awesomeness"} 
D, [2017-11-22T19:21:11.016579 #5898] DEBUG -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] ^[[1m^[[36mApiKey Load (0.3ms)^[[0m ^[[1m^[[34mSELECT "api_keys".* FROM "api_keys" WHERE "api_keys"."client" = $1 LIMIT $2^[[0m [["client", "z8CSVtE3qejMxs4FFwYmKA"], ["LIMIT", 1]] 
I, [2017-11-22T19:21:11.021183 #5898] INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Redirected to http://localhost:4200 
I, [2017-11-22T19:21:11.021266 #5898] INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Filter chain halted as :authorized rendered or redirected 
I, [2017-11-22T19:21:11.021376 #5898] INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Completed 302 Found in 19ms (ActiveRecord: 5.5ms) 

テンプレート

<div class="container"> 
    <h1>Movie Add Form</h1> 
    <form [formGroup]="newForm" (ngSubmit)="upload()"> 
     <div class="form-group"> 
      <label for="title">Title:</label> 
      <input 
       type="text" 
       name="title" 
       class="form-control" 
       formControlName="title" 
      > 

      <label for="year">Year:</label> 
      <input 
       type="text" 
       name="year" 
       class="form-control" 
       formControlName="year" 
      > 

      <label for="plot">Plot:</label> 
      <input 
       type="text" 
       name="plot" 
       class="form-control" 
       formControlName="plot" 
      > 
     </div> 

     <div class="form-group"> 
      <input type="file" #fileInput placeholder="Upload file..." accept="video/mp4"> 
     </div> 

     <div class="form-group"> 
      <button type="submit" class="btn btn-primary">Submit</button> 
     </div> 
    </form> 
</div> 

コンポーネント

export class DvdNewComponent implements OnInit { 
    newForm: FormGroup 
    @ViewChild('fileInput') fileInput; 

    constructor(private dvdService: DvdService, 
          private router: Router) { } 

    ngOnInit() { 
     this.newForm = new FormGroup({ 
      'title': new FormControl(null, Validators.required), 
      'year': new FormControl(null, Validators.required), 
      'plot': new FormControl(null, Validators.required) 
     }) 
    } 

    upload() { 
     const movieFile = this.fileInput.nativeElement.files[0]; 

     this.dvdService.uploadMovie(movieFile, this.newForm.value) 
      .subscribe(
       (data) => { 
        console.log('data ' + data) 
       }, 
       (err: HttpErrorResponse) => { 
        console.log(err) 
       }, 
       () => { 
        this.router.navigate(['/library']) 
       } 
      ) 
    } 
} 

サービス

uploadMovie(fileToUpload: File, form): Observable<Movie> { 
     const formData = new FormData(); 
     formData.append('video', fileToUpload) 
     formData.append('title', form.title) 
     formData.append('year', form.year) 
     formData.append('plot', form.plot) 
     const headers = new Headers(); 
     headers.delete('Content-Type'); 
     headers.append('access-token', this.tokenService.currentAuthData.accessToken) 
     headers.append('client', this.tokenService.currentAuthData.client) 
     const options = new RequestOptions({ headers: headers }); 

     return this.http.post(this.moviesURL + '/movies', formData, options) 
     .map((res) => res.json()) 
    } 

見て何のログです

支えコントローラ

def create 
       movie = Movie.new(movie_params) 

       if movie.save 
         render json: movie, status: 201 
       else 
         render json: { errors: movie.errors }, status: 422 
       end 
     end 

def movie_params 
         params.permit(:title, :year, :plot, :video, :video_url) 
       end 

Answer 1

のコメントを読んだ後、私は、ラックCORSをチェックし、それが有効になったことがわかりました。次に、認証システムをチェックし、クライアントIDが一致していないことが判明した後に見つけました。これは、フロントエンドが間違ったエンドポイントにルーティングされることでした。そこで、正しいエンドポイントを挿入することで問題を解決しました。