각도 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

코멘트를 읽은 후, 나는 랙 고르을 확인하고 활성화 된 것을 발견했다. 다음으로 인증 시스템을 확인한 후 클라이언트 ID가 일치하지 않는 것을 발견했습니다. 이는 프론트 엔드가 잘못된 엔드 포인트로 라우트되는 것과 관련이 있습니다. 그래서 올바른 엔드 포인트를 삽입하여 문제를 해결했으며 코드가 작동합니다.