带有“表单数据”类型的请求正文参数的POST不起作用+角度2

Question

I am sending a file and other parameters in body with type 'form-data' in postman and it works fine. I want to do the same in angular 2. Please find the snapshot of the request in postman:

Also, find my non-working angular code. What is wrong with that:

let formData: FormData = new FormData();
        formData.append('file', file);
        formData.append('pid', 2);
        formData.append('cid', 4);
        let headers = new Headers();
        headers.append('Authorization', '5C7D01DD-95F5-44CA-B897-012B218D80012');
        let requestOptions = new RequestOptions({ headers: headers });
        console.log('API call: to upload lead file');
        return this.http.post("http://blahblha.com" + LeadApi, formData, requestOptions)
            .retryWhen((error) => error.delay(this.appConfig.serviceCallRetryDelay))
            .timeout(this.appConfig.serviceCallRetryTimeOut)
            .map((response: Response) => response.json());

I am getting Error 500- Internal Server Error

Also, attached is the request payload from Network:

------WebKitFormBoundaryzbq2nbK8gMNeqBck
Content-Disposition: form-data; name="file"; filename="Testleads.csv"
Content-Type: application/vnd.ms-excel


------WebKitFormBoundaryzbq2nbK8gMNeqBck
Content-Disposition: form-data; name="pid"

2
------WebKitFormBoundaryzbq2nbK8gMNeqBck
Content-Disposition: form-data; name="cid"

4
------WebKitFormBoundaryzbq2nbK8gMNeqBck--

What am i doing wrong in angular2??

Answer 1

Create an Angular2 Service first, so you can access it and just call methods when you need to get or post data.

Service:

@Injectable()
export class ApiService {
    private headers = new Headers({'Content-Type': 'application/form-data; charset=UTF-8'});

    constructor(private http: Http) {
    }

    public send(url, body: Object): Observable<any> {
        let bodyString = this.serializeObj(body);

        return this.http
            .post(url, bodyString, {headers: this.headers})
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        if (body) {
            return body.data || body;
        } else {
            return {};
        }
    }

    private handleError(error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }

    private serializeObj = function (obj, prefix = null) {
        let str = [], p;
        for (p in obj) {
            if (obj.hasOwnProperty(p)) {
                let k = prefix ? prefix + '[' + p + ']' : p, v = obj[p];
                str.push((v !== null && typeof v === 'object') ?
                    this.serializeObj(v, k) :
                    encodeURIComponent(k) + '=' + encodeURIComponent(v));
            }
        }
        return str.join('&');
    };
}

In your component:

constructor(private apiService: ApiService) {
    let mySendingObject = {}; // This is the object you send in your POST
    this.sendData(mySendingObject); // And here we are actually calling our method that uses the post method within ApiService
}

sendData(myObj) {
   let url = 'http://blahblha.com' + LeadApi;
   return this.apiService.send(url, myObj);
}

Where you need to send your post, just call inside your component the method sendData() .

This way you have several things achieved:

• You separated your api service from the rest of your App
• You can create a more specific service that imports the ApiService . For example: UserService that imports and uses ApiService
• We have methods that:
  • Handle error in calls: handleError()
  • Extract the data: extractData()
  • Serialize objects: serializeObj()

The structure should be like:

• ApiService : manages the API calls with Http (post, get, etc)
  • Local service, example: UserService : imports the ApiService and has methods such as: updateUser , deleteUser , addUser ... For example.
    • The component, example: UsersViewComponent : Uses the UserService and interacts with it through the view .