Как отправить данные формы в почтовом запросе HTTP с угловым 2?

Question

Я пытаюсь отправить данные формы обновленных данных пользователя на задний конец, сервер узлов в угловом 2, однако я не смог отправить данные формы, а сервер ответил со статусом 500. В angularjs я сделал что-то вроде это, служба файл

update: { 
    method: 'POST', 
    params: { 
     dest1: 'update' 
    }, 
    transformRequest: angular.identity, 
    'headers': { 
     'Content-Type': undefined 
    } 
    } 

в контроллере, как

var fd = new FormData(); 
var user = { 
    _id: StorageFactory.getUserDetail()._id, 
    loc: locDetails 
}; 
fd.append('user', angular.toJson(user)); 
UserService.update(fd). 
$promise.then(
    function(value) { 
    console.info(value); 
    updateUserDetailsInStorage(); 
    }, 
    function(err) { 
    console.error(err); 
    } 
); 

Я не мог понять, как это сделать в угловом 2, как angular.toJson, angular.identity и элемен ormrequest функция не доступна в угловом 2, до сих пор я сделал следующее в угловом 2,

let fd = new FormData(); 
let user = { 
    _id: this.appManager.getUserDetail()._id, 
    loc: locDetails 
}; 
fd.append('user', JSON.stringify(user)); 
this.userService.update(fd).subscribe((value) => { 
    console.log(value); 
    this.updateUserDetailsInStorage(); 
}, (err) => { 
    console.error(err); 
}); 

служба HTTP файла

update(body) { 
    console.log('update', body); 
    const headers = new Headers({ 
    'Content-Type': undefined 
    }); 

    const options = new RequestOptions({ 
    headers: headers 
    }); 
    return this.http.post(`${app.DOMAIN}` + 'user/update', body, options) 
    .map((res: Response) => { 
     res.json(); 
    }).do(data => { 
     console.log('response', data); 
    }) 
} 

Я прочитал много постов и пытался несколько вещей, но пока это не увенчалось успехом, может ли кто-нибудь предложить мне, как это сделать?

Answer 1

Вот мой метод, который отлично работает.

updateProfileInformation(user: User) { 
    this.userSettings.firstName = user.firstName; 
    this.userSettings.lastName = user.lastName; 
    this.userSettings.dob = user.dob; 

    var headers = new Headers(); 
    headers.append('Content-Type', this.constants.jsonContentType); 

    var s = localStorage.getItem("accessToken"); 
    headers.append("Authorization", "Bearer " + s); 
    var body = JSON.stringify(this.userSettings); 

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers }) 
     .map((response: Response) => { 
     var result = response.json(); 
     return result; 
     }) 
     .catch(this.handleError) 
    } 

Answer 2

Это функциональное решение для построения запроса POST в Angular2, вам не нужен заголовок авторизации.

var headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

let options = new RequestOptions({ headers: headers }); 

var body = "firstname=" + user.firstname + "&lastname=" + user.lastname + "&username=" + user.username + "&email=" + user.email + "&password=" + user.password; 

return new Promise((resolve) => { 
       this.http.post("http://XXXXXXXXXXX/users/create", body, options).subscribe((data) => { 
       if (data.json()) { 
        resolve(data.json()); 
       } else { 
        console.log("Error"); 
       } 
      } 
     ) 
    }); 

Answer 3

Вы можете добавить заголовки, если ваш контроллер сервера требует еще вы можете просто разместить его, как этот

let body = new FormData(); 
body.append('email', 'emailId'); 
body.append('password', 'xyz'); 
this.http.post(url, body); 

Answer 4

Вот метод я использовал в угловом 4 для загрузки файлов .... для Ui

<input type="file"id="file"(change)="handleFileInput($event)"> 

и ts-файл я добавил это ....

handleFileInput(event) { 
    let eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
    let target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
    let files: FileList = target.files; 
    this.fileToUpload = files[0]; 
    console.log(this.fileToUpload); 
    } 



uploadFileToActivity() { 
    console.log('Uploading file in process...!' + this.fileToUpload); 
    this.fontService.upload(this.fileToUpload).subscribe(
     success => { 
     console.log(JSON.stringify(this.fileToUpload)); 
     console.log('Uploading file succefully...!'); 
     console.log('Uploading file succefully...!' + JSON.stringify(success)); 
     }, 
     err => console.log(err), 
    ); 
    } 

и В сфере услуг

upload(fileToUpload: File) { 
    const headers = new Headers({'enctype': 'multipart/form-data'}); 
    // headers.append('Accept', 'application/json'); 
    const options = new RequestOptions({headers: headers}); 
    const formData: FormData = new FormData(); 
    formData.append('file', fileToUpload, fileToUpload.name); 
    console.log('before hist the service' + formData); 
    return this.http 
     .post(`${this.appSettings.baseUrl}/Containers/avatar/upload/`, formData , options).map(
     res => { 
      const data = res.json(); 
      return data; 
     } 
    ).catch(this.handleError); 
    }