ASP.Net Web Apiバックエンドを使用して、Typescriptで書かれたAngularアプリケーションがあります。私は画像ファイルをアップロードするためのng-file-upload(詳細はこのlinkを参照)指示文を使用しようとしています。MIMEマルチパートストリームの終了予定です。 MIMEマルチパートメッセージが完全ではありません
私は私のウェブAPI POSTメソッドで例外を受け取る:「MIMEマルチパートストリームの予期しない終わりMIMEマルチパートメッセージが完了していない。」
私は研究を行い、同様の問題が見つかりましたhere - 私はLanduber Kassaの答えを実装しようとしましたが、成功しませんでした。
this私のプロジェクトはMVCではありませんが、いずれにしても動作しませんでした。
私はアイデアが新鮮で、コミュニティの考えに感謝します。私が正しい方向を指すことができれば、他の選択肢も考慮して喜んでいます。
アッシュ
マイネット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>
感謝。私が試してみる前に、このアプローチについて何が違うかについて少し説明することができます。 –
基本的には、角度アップロードからのマルチパートアップロードコンテンツを取得するためのバトルテスト済みの方法です。これは正しい形式をthis.Requestから取り、非同期タスクで名前を生成します(上書きしないランダムなGUIDまたは誰かが他の同じ名前の同じ画像をアップロードしている場合は例外になります) –
コントローラー(角度)と必要な場合はHTMLを表示します。あなたの投稿方法を確認してください(chrome console ..フォーマットが正しければ。要求のヘッダーを上書きしようとしていません) –