Angular 2 HTTP post使用HttpInterceptor,无法通过HTTP post中的formData发送图像
我想展示我现在使用的代码,这样我就可以收到问题的解决方案Angular 2 HTTP post使用HttpInterceptor,无法通过HTTP post中的formData发送图像,angular,http,post,image-uploading,interceptor,Angular,Http,Post,Image Uploading,Interceptor,我想展示我现在使用的代码,这样我就可以收到问题的解决方案 下面的代码是API将图像存储在本地项目文件夹中的代码 [HttpPost] [Route("api/UploadFileApi")] public HttpResponseMessage Postfiles() { HttpResponseMessage result = null; var httpRequest = HttpContext.Current.Request;
下面的代码是API将图像存储在本地项目文件夹中的代码
[HttpPost]
[Route("api/UploadFileApi")]
public HttpResponseMessage Postfiles()
{
HttpResponseMessage result = null;
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count > 0)
{
var docfiles = new List<string>();
foreach (string file in httpRequest.Files)
{
var postedFile = httpRequest.Files[file];
var filePath = HttpContext.Current.Server.MapPath("~/locker/" + postedFile.FileName);
postedFile.SaveAs(filePath);
docfiles.Add(filePath);
}
result = Request.CreateResponse(HttpStatusCode.Created, docfiles);
}
else
{
result = Request.CreateResponse(HttpStatusCode.BadRequest);
}
return result;
}
从上面的代码来看,如果我在angular2中使用HttpInterceptor概念,它将成为服务调用(下面的代码),本地主机将在下面的代码之后附加到URL
constructor(private http: Http) { }
fileUpload(formData) {
let headers = new Headers();
headers.append("Accept", "multipart/form-data");
let options = new RequestOptions({ headers: headers });
return this.http.post('/api/UploadFileApi', formData, options)
.map((res: Response) => res.json())
.toPromise();
}
但是当调用上面的Post方法时,它将使用backendconnection调用httpinterceptor.Post方法,因为我试图在我的项目中使用这个httpinterceptor概念。下面是代码
post(url: string, formData: any, options?: RequestOptionsArgs): Observable<Response> {
url = this.updateUrl(url, options);
return super.post(url, formData, this.getRequestOptionArgs(options));
}
因此,当调用上述API时,当am使用httpinterceptor概念时,不会传递formData。如果我没有使用httpinterceptor,那么映像将作为HttpContext和正在存储的映像通过formData传递到API
如果我不使用HttpInterceptor概念,我从angular2到API的服务调用就像这样,所以它工作得很好(看看URL中的变化)
但是我必须使用HttpInterceptor的概念并开发其功能,我不知道为什么HttpInterceptor的帖子没有将formData传递给API。我现在要做的是使用HttpInterceptor.Post调用API伙计们,我遇到了问题。。。它在拦截器中。我再次将内容类型附加为application.json,因此当它将成为API时,文件无法识别。您在post请求中更改了什么?伙计们,我遇到了问题。。。它在拦截器中。我再次将内容类型附加为application.json,因此当它将成为API时,文件无法识别。您在post请求中做了哪些更改?
post(url: string, formData: any, options?: RequestOptionsArgs): Observable<Response> {
url = this.updateUrl(url, options);
return super.post(url, formData, this.getRequestOptionArgs(options));
}
private getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
if (options == null) {
options = new RequestOptions();
}
if (options.headers == null) {
options.headers = new Headers();
}
options.headers.append('Content-Type', 'application/json');
return options;
}
fileUpload(formData) {
let headers = new Headers();
headers.append("Accept", "multipart/form-data");
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:3636/api/UploadFileApi', formData, options)
.map((res: Response) => res.json())
.toPromise();
}