web-dev-qa-db-ja.com

ファイルをWebAPIサーバーにアップロードし、アクションに沿ってパラメーターを送信するにはどうすればよいですか？

良い一日！

ASP.NET Web API2プロジェクトに取り組んでいます。ある時点で、いくつかのファイルをアップロードする必要があります。ファイルは、特定のFileModel（独自のクラス）にリンクする必要があります。したがって、クライアントはIEnumerableをパラメーターとして送信し、ファイルをコンテンツとして送信する必要があります。これはRESTfulAPIであるため、両方を同じリクエストで送信する必要があります。

私たちが思いつくことができる最善の方法は、次のコントローラーアクションです。

public async Task<HttpResponseMessage> Add([FromUri] IEnumerable<FileModel> fileModels)
{
   // REQUEST INTEGRITY TESTING

   var streamProvider = new CustomMultipartFormDataStreamProvider(fileSavePath, fileModels);
   // Read the MIME multipart content using the stream provider we just created.
   var work = await Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(async t =>
        {
            // SOME WORK DONE AFTER SAVING THE FILES TO THE HARD DRIVE
        }

}

問題は次のとおりです。ファイルは「multipart/form-data」Content-Typeヘッダーでアップロードされています。 サーバー側でファイルを操作する前に、FileModelsの内容を知る必要があります。MultipartFormDataStreamProviderを使用する場合、ファイルがハードドライブに既に保存された後でのみ、ファイル以外のパラメーターにアクセスできます。 ==

私たちが見つけた唯一の回避策は、URLでIEnumerable <FileModel>パラメーターを送信することです。ただし、URLの最大長が制限されていることを考えると、これは信頼できる方法ではありません。

質問は：IEnumerable <FileModel> fileModelsパラメーターとファイルの両方を送信する方法はありますかリクエストの本文でアクセスする前にfileModelsパラメーターにアクセスしますファイル？また、HttpContext.Current.Request.Files.Countを使用できるようにする必要があります。

ファイルアップロード用の現在のjQueryは次のようになります（初期のテスト目的では、1つのファイルアップロードのみをサポートします）。

$('#Upload').click(function(e) {
            e.preventDefault();

            var headers = new Array();
            headers["SessionId"] = sessionId;

            var files = $('#fileInput').get(0).files;
            var formData = new FormData();
            formData.append("files", files[0]);

            var fileModel = $('#fileSubmission').serialize();

            $.ajax({
                url: "api/Submissions/Add/?" + fileModel,
                headers: headers,
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json'
            });
        });

どうもありがとうございました！

c#jqueryfile-uploadasp.net-web-api2multipartform-data
10
tony.hegyes

回答が遅れて申し訳ありませんが、問題は解決しました（回答をここにアップロードしなかったことを忘れました）。基本的には、一時的な場所でReadAsMultiPartAsyncメソッドを呼び出してから、リクエストから他のパラメーターを抽出しました。その後、入力を検証し、ファイルを一時的な場所から永続的な場所に移動しました。

コードを見たい場合は、これが私たちの特定の例で機能したものであり、あらゆるワークケースシナリオに適応するのは非常に簡単だと思います：

クライアント側には、次のフォームがあります（はい、この実装はデモ用であり、1つのファイルの送信のみをサポートしています...また、input type = "file"フィールドは実際にフォームの外にあります。fileIdテキスト入力はこの場合、テスト目的で手動で完了します）

<input type="file" name="data" id="fileInput" multiple="multiple" />

<form id="fileSubmission">            
    <input type="text" width="10" onchange="getFileDetails()" autocomplete="off" placeholder="FileId" name="files[0].Id" id="fileId" /> 
    <input type="hidden" name="files[0].FileName" id="FileName"/>
    <input type="hidden" name="files[0].Extension" id="Extension"/>
    <input type="hidden" name="files[0].EntityId" id="EntityId"/>
    <br /><br />
    <input type="submit" id="Upload" value="Upload" />
</form>

ここで、getFileDetails（）は他の入力フィールドに入力します。また、フォームは次のjQuery/Javascriptを使用してサーバーに送信されます。

$('#Upload').click(function(e) {
            e.preventDefault();

            var courseId = $('#courseId').val();
            var fileId = $('#fileId').val();
            if (!courseId || !fileId) {
                return;
            }

            var headers = new Array();
            headers["SessionId"] = sessionId;
            headers["contentType"] = "application/json; charset=UTF-8";

            var formData = new FormData();
            var opmlFile = $('#fileInput').get(0).files;

            // this is like the model we're expecting on the server
            var files = [];
            files.Push({ 'Id': $('#fileId').val(), 'OriginalFileName': opmlFile[0].name, 'FileName': $('#FileName').val(), 'Extension': $('#Extension').val(), 'EntityId': $('#EntityId').val() });

            formData.append("fileModels", JSON.stringify(files));
            formData.append("File_0", opmlFile[0]);


            $.ajax({
                url: "api/Courses/" + courseId + "/Submissions/Add/",
                headers: headers,
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json'
            });
        });

サーバー側では、次のものがあります。

// POST: api/Courses/{courseId}/Submissions/Add
[HttpPost]
[ValidateModelState]
[ValidateMimeMultipartContent]
[PermissionsAuthorize(CoursePermissions.CanCreateSubmissions)]
public async Task<HttpResponseMessage> Add(int courseId)
    {
        // the same as in the jQuery part
        const string paramName = "fileModels";

        // Put the files in a temporary location
        // this way we call ReadAsMultiPartAsync and we get access to the other data submitted
        var tempPath = HttpContext.Current.Server.MapPath("~/App_Data/Temp/" + Guid.NewGuid());
        Directory.CreateDirectory(tempPath);

        var streamProvider = new MultipartFormDataStreamProvider(tempPath);
        var readResult = await Request.Content.ReadAsMultipartAsync(streamProvider);

        if (readResult.FormData[paramName] == null)
        {
            // We don't have the FileModels ... delete the TempFiles and return BadRequest
            Directory.Delete(tempPath, true);
            return Request.CreateResponse(HttpStatusCode.BadRequest);
        }

        // The files have been successfully saved in a TempLocation and the FileModels are not null
        // Validate that everything else is fine with this command
        var fileModels = JsonConvert.DeserializeObject<IEnumerable<FileModelExtension>>(readResult.FormData[paramName]).ToList();

        // AT THIS POINT, ON THE SERVER, WE HAVE ALL THE FILE MODELS 
        // AND ALL THE FILES ARE SAVED IN A TEMPORARY LOCATION

        // NEXT STEPS ARE VALIDATION OF THE INPUT AND THEN 
        // MOVING THE FILE FROM THE TEMP TO THE PERMANENT LOCATION

        // YOU CAN ACCESS THE INFO ABOUT THE FILES LIKE THIS:
        foreach (var tempFile in readResult.FileData)
            {
                var originalFileName = tempFile.Headers.ContentDisposition.FileName.Replace("\"", string.Empty);

                var localTempPath = tempFile.LocalFileName;
            }

    }

これが、Postリクエストを使用してファイルやその他のパラメーターをサーバーに一度に送信しようとする人の助けになることを願っています！ ：）

注：サーバーで使用される属性の一部はカスタムです。 PermissionAuthorize、ValidateModelState、およびValidateMimeMultiPartContentは、使用したカスタムフィルターです。後者の2つの実装は、 http://benfoster.io/blog/automatic-modelstate-validation-in-aspnet-mvc に触発されています。

Multipartcontent属性は、次のようにactionContext.Request.Content.IsMimeMultipartContent（）をチェックするだけです。

public class ValidateMimeMultipartContent : ActionFilterAttribute
{
    public override void OnActionExecuting(HttpActionContext actionContext)
    {
        if (!actionContext.Request.Content.IsMimeMultipartContent())
        {
            actionContext.Response = actionContext.Request.CreateErrorResponse(HttpStatusCode.UnsupportedMediaType, Messages.UnsupportedMediaType);
        }
    }
}
6
tony.hegyes