Angular2 및 Typescript를 사용하여 이미지를 업로드하고 저장하는 방법

이미지를 업로드해야하는 이미지 업로드 섹션이 있습니다. 하지만 내가 구할 때 generic이라는 오류가 발생합니다. 누구든지이 문제를 해결하도록 도와 줄 수 있습니다.Angular2 및 Typescript를 사용하여 이미지를 업로드하고 저장하는 방법

HTML :

<label >Image</label> 
<div > 
<input type="file" name="file" id="file" class="inputfile" (change)="readUrlAdd($event)" style="display:none;"/> <label for="file" >Add Image</label> 
</div>

TS :

readUrlAdd(event: any) { 
    var files = event.srcElement.files; 
    var filename = new Date().getTime() + '.' + files[0].name.split(".")[1]; 
    var imgFile = new File([files[0]], filename, { type: files[0].type }); 
    var file_data = imgFile; 
    this.ApiService 
     .uploadImage(file_data) 
     .subscribe(
     image => { 
      console.log(image); 
      var fileName = image.result.files.file[0].providerResponse.location; 
      console.log(fileName); 
      this.tutorials = fileName; 
     }, error => { 
      console.log(error); 
     }) 
    }

API : 당신이 파일을 업로드 file uploader를 사용할 필요가

uploadImage (files) { 
    let token = JSON.parse(localStorage.getItem('token')); 
    var fd = new FormData(); 
    fd.append('file', files); 
    return this.http.post(urlBase + '/tutorials/tutorial?token=' + token,fd) 
        .map(this.extractData) 
        .catch(this.handleError); 
}

출처

2017-12-26 Bhrungarajni

가능한 중복 ?] (https://stackoverflow.com/questions/40214772/file-upload-in-angular) –

. 다음 명령을 사용하여 설치하십시오. demo

npm i ng2-file-upload --save

출처

2017-12-26 06:10:37

응답 해 주셔서 감사합니다. 시도하고 업데이트 할 것입니다. – Bhrungarajni

데모 링크 추가 –

event.srcElement를 모든 브라우저에서 작동하지 않습니다 발견, 당신이 headers을 통과해야

const files = event.target.files || event.srcElement.files; 
const imgFile = files[0];

출처

2017-12-26 06:14:23 laiju

응답 해 주셔서 감사합니다. – Bhrungarajni

이 코드 조각은 해결책이 될 수 있지만 [설명을 포함] (// meta.stackexchange.com/questions/114762/explaining-entirely- 코드 기반 답변)은 게시물의 품질을 향상시키는 데 정말로 도움이됩니다. 앞으로 독자의 질문에 답하고 있으며 코드 제안의 이유를 알지 못할 수도 있습니다. – yivi

아래를보십시오 request

let headers = new Headers(); 
headers.append('token', token); // Try to pass token in header 
let options = new RequestOptions({ headers: headers }); 

return this.http.post(urlBase + '/tutorials/tutorial,fd, options) 
       .map((res: Response) => res.json() || {}) 
       .catch(this.handleError);

각도에서 [파일 업로드의

출처

2017-12-26 06:37:42 hrdkisback

내가 옵션을 사용하면 사용자를 찾을 수 없다는 오류가 발생합니다. – Bhrungarajni

올바른 토큰을 전달하는지 확인하는 'token'의 문제라고 생각합니다. 또는 서버 측에서 query param의 토큰을 기대합니까? token ='토큰을 전달하려고 시도합니다. 'headerers.append ('token ', token);과 같은 헤더에' – hrdkisback

나중에 시도해 보겠습니다. – Bhrungarajni

Angular2 및 Typescript를 사용하여 이미지를 업로드하고 저장하는 방법

답변

관련 문제