Angular ラッパー ( https://github.com/flowjs/ng-flow/tree/master/samples/basic ) を介して flow.js ( https://github.com/flowjs/flow.js )を使用しようとしています。 ) ASP.NET WebAPI 2 サーバーにファイルをアップロードします。とにかく、アップロードするファイルを選択すると、WebAPI が最初のチャンク GET 要求を取得しただけで何も起こりません。POST が行われず、flow.js がアップロードを開始しなかったようです。
ファイルを選択したときに起動される最初の GET は次のとおりです。
GET http://localhost:49330/api/upload?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=4751&flowTotalSize=4751&flowIdentifier=4751-ElmahMySqlsql&flowFilename=Elmah.MySql.sql&flowRelativePath=Elmah.MySql.sql&flowTotalChunks=1 HTTP/1.1
Host: localhost:49330
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
Accept: */*
Referer: http://localhost:49330/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,it;q=0.6
そして、応答は次のとおりです。
HTTP/1.1 202 Accepted
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcUHJvamVjdHNcNDViXFRlc3RcVXBUZXN0XFVwVGVzdFxhcGlcdXBsb2Fk?=
X-Powered-By: ASP.NET
Date: Fri, 17 Apr 2015 08:02:56 GMT
Content-Length: 0
その後、それ以上の要求は発行されません。
最新の WebAPI の例はなく、投稿が散在しているように見えるので、私のような初心者向けに、http://1drv.ms/1CSF5jqからダウンロードできるダミーの再現ソリューションを作成しました。これは ASP.NET WebAPI 2 です。対応するAPIコントローラーを追加した後、ホームビューにアップロードコードを配置したソリューション。F5 を押して、ファイルをアップロードしてみてください。API コントローラは にありUploadController.csます。
関連するコード部分は次のとおりです。
a)クライアント側: ng-flow ページのクイックスタートの例に似たページ:
<div class="row">
<div class="col-md-12">
<div flow-init="{target: '/api/upload'}"
flow-files-submitted="$flow.upload()"
flow-file-success="$file.msg = $message">
<input type="file" flow-btn />
<ol>
<li ng-repeat="file in $flow.files">{{file.name}}: {{file.msg}}</li>
</ol>
</div>
</div>
</div>
対応するコードは、基本的に、モジュールの初期化を伴う空の TS スケルトンです。
module Up {
export interface IMainScope {
}
export class MainController {
public static $inject = ["$scope"];
constructor(private $scope: IMainScope) {
}
}
var app = angular.module("app", ["flow"]);
app.controller("mainController", MainController);
}
b)サーバー側: 必要なスクリプトにいくつかのバンドルを追加し、ng-Flow を使用して ASP.NET でファイルをチャンクでアップロードする方法で見つけたサンプル コードから変更した次のコントローラーを追加しました。GETUploadメソッドでは、バインディング モデルを使用して署名を変更したことに注意してください (そうしないと、ルートが一致しなかったため 404 が返されます)。チャンクが見つからない場合は202 - Accepted、flow.js のドキュメントにあるように、404 ではなくコードを返します。その 200 は「チャンクは受け入れられ、正しいものです。再アップロードする必要はありません」に対応し、404 はアップロード全体をキャンセルし、他のコード (ここでは 202 など) はアップローダーに再試行するように指示します。
[RoutePrefix("api")]
public class UploadController : ApiController
{
private readonly string _sRoot;
public UploadController()
{
_sRoot = HostingEnvironment.MapPath("~/App_Data/Uploads");
}
[Route("upload"), AcceptVerbs("GET")]
public IHttpActionResult Upload([FromUri] UploadBindingModel model)
{
if (IsChunkHere(model.FlowChunkNumber, model.FlowIdentifier)) return Ok();
return ResponseMessage(new HttpResponseMessage(HttpStatusCode.Accepted));
}
[Route("upload"), AcceptVerbs("POST")]
public async Task<IHttpActionResult> Upload()
{
// ensure that the request contains multipart/form-data
if (!Request.Content.IsMimeMultipartContent())
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
if (!Directory.Exists(_sRoot)) Directory.CreateDirectory(_sRoot);
MultipartFormDataStreamProvider provider =
new MultipartFormDataStreamProvider(_sRoot);
try
{
await Request.Content.ReadAsMultipartAsync(provider);
int nChunkNumber = Convert.ToInt32(provider.FormData["flowChunkNumber"]);
int nTotalChunks = Convert.ToInt32(provider.FormData["flowTotalChunks"]);
string sIdentifier = provider.FormData["flowIdentifier"];
string sFileName = provider.FormData["flowFilename"];
// rename the generated file
MultipartFileData chunk = provider.FileData[0]; // Only one file in multipart message
RenameChunk(chunk, nChunkNumber, sIdentifier);
// assemble chunks into single file if they're all here
TryAssembleFile(sIdentifier, nTotalChunks, sFileName);
return Ok();
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
private string GetChunkFileName(int chunkNumber, string identifier)
{
return Path.Combine(_sRoot,
String.Format(CultureInfo.InvariantCulture, "{0}_{1}",
identifier, chunkNumber));
}
private void RenameChunk(MultipartFileData chunk, int chunkNumber, string identifier)
{
string sGeneratedFileName = chunk.LocalFileName;
string sChunkFileName = GetChunkFileName(chunkNumber, identifier);
if (File.Exists(sChunkFileName)) File.Delete(sChunkFileName);
File.Move(sGeneratedFileName, sChunkFileName);
}
private string GetFileName(string identifier)
{
return Path.Combine(_sRoot, identifier);
}
private bool IsChunkHere(int chunkNumber, string identifier)
{
string sFileName = GetChunkFileName(chunkNumber, identifier);
return File.Exists(sFileName);
}
private bool AreAllChunksHere(string identifier, int totalChunks)
{
for (int nChunkNumber = 1; nChunkNumber <= totalChunks; nChunkNumber++)
if (!IsChunkHere(nChunkNumber, identifier)) return false;
return true;
}
private void TryAssembleFile(string identifier, int totalChunks, string filename)
{
if (!AreAllChunksHere(identifier, totalChunks)) return;
// create a single file
string sConsolidatedFileName = GetFileName(identifier);
using (Stream destStream = File.Create(sConsolidatedFileName, 15000))
{
for (int nChunkNumber = 1; nChunkNumber <= totalChunks; nChunkNumber++)
{
string sChunkFileName = GetChunkFileName(nChunkNumber, identifier);
using (Stream sourceStream = File.OpenRead(sChunkFileName))
{
sourceStream.CopyTo(destStream);
}
} //efor
destStream.Close();
}
// rename consolidated with original name of upload
// strip to filename if directory is specified (avoid cross-directory attack)
filename = Path.GetFileName(filename);
Debug.Assert(filename != null);
string sRealFileName = Path.Combine(_sRoot, filename);
if (File.Exists(filename)) File.Delete(sRealFileName);
File.Move(sConsolidatedFileName, sRealFileName);
// delete chunk files
for (int nChunkNumber = 1; nChunkNumber <= totalChunks; nChunkNumber++)
{
string sChunkFileName = GetChunkFileName(nChunkNumber, identifier);
File.Delete(sChunkFileName);
} //efor
}
}