【发布时间】:2017-05-12 15:13:24
【问题描述】:
我有一个 Angular 应用程序,用 Typescript 编写,带有 ASP.Net Web Api 后端。我正在尝试使用 ng-file-upload(有关详细信息,请参阅此 link)指令来上传图像文件。
我在我的 Web API Post 方法中收到异常:
“MIME 多部分流意外结束。MIME 多部分消息不完整。”
我已经完成了我的研究并发现了类似的问题here - 我尝试实施 Landuber Kassa 的答案,但没有成功。
还有this,虽然我的项目不是 MVC,而且无论如何它都不起作用。
我的想法很新鲜,我很欣赏社区的想法。如果我能指出正确的方向,我很乐意考虑任何其他替代方案。
灰
我的 .Net Post 方法(实现 Landuber Kassa 的想法):
[RoutePrefix("BeaufortAppStore/api/Image")]
public class ImageController : ApiController
{
#region Methods
#region Posts
[Route("UploadImage")]
[HttpPost]
public async Task<IHttpActionResult> UploadImage()
{
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
var provider = new MultipartMemoryStreamProvider();
Stream reqStream = Request.Content.ReadAsStreamAsync().Result;
MemoryStream tempStream = new MemoryStream();
reqStream.CopyTo(tempStream);
tempStream.Seek(0, SeekOrigin.End);
StreamWriter writer = new StreamWriter(tempStream);
writer.WriteLine();
writer.Flush();
tempStream.Position = 0;
StreamContent streamContent = new StreamContent(tempStream);
foreach (var header in Request.Content.Headers)
{
streamContent.Headers.Add(header.Key, header.Value);
}
// Read the form data and return an async task.
await streamContent.ReadAsMultipartAsync(provider); // FAILS AT THIS POINT
foreach (var file in provider.Contents)
{
var filename = file.Headers.ContentDisposition.FileName.Trim('\"');
var buffer = await file.ReadAsByteArrayAsync();
//Do whatever you want with filename and its binary data.
}
return Ok();
}
#endregion
#endregion
我的角度控制器方法:
public upload(): void {
//Create config used in ng-file-upload
var config: IFileUploadConfigFile = {
data: this.file, url: "BeaufortAppStore/api/Image/UploadImage/", method: "POST" };
this._dataService.uploadImage(config).then((result: any) => {
this.thumbnail = result.data;
});
}
我的角度视图(指令的部分视图):
<div class="form-group">
<label for="file" class="control-label col-xs-2">Choose a file</label>
<input id="file" type="file" name="file" class="form-control" ngf-select ngf-pattern="'image/*'"
ng-model="vm.file" />
<img style="width:100px;" ngf-thumbnail="thumbnail || '/thumb.jpg'" />
<button type="submit" ng-click="vm.upload()">Upload</button>
【问题讨论】:
-
关于这个问题的任何更新?我在上传文件时也遇到了同样的情况。如果您找到任何解决方案,分享会很有帮助。
标签: c# angularjs asp.net-web-api ng-file-upload