2017-02-28 19 views
1

同様の問題やいくつかのブログで多くのstackoverflow投稿を読んだことがありますが、Web APIを使用してviewModelと一緒にファイルを送信する方法、または一時的なデータを使用して保存する方法

私は、サーバーにファイルをアップロードすることができますangularJSディレクティブを持っているコードは次のようである:。

[HttpPost]  
    [Route("UploadFile")] 
    public async Task<HttpResponseMessage> UploadFile() 
    {   
     // Check if the request contains multipart/form-data. 
     if (Request.Content.IsMimeMultipartContent("form-data")) 
     {    
      try 
      { 
       var resultOut = new List<FileUploadResult>(); 

       var streamProvider = new MultipartMemoryStreamProvider(); 
       streamProvider = await Request.Content.ReadAsMultipartAsync(streamProvider); 

       foreach (
        var item in 
        streamProvider.Contents.Where(c => !string.IsNullOrEmpty(c.Headers.ContentDisposition.FileName)) 
       ) 
       { 
        FileUploadResult file = new FileUploadResult() 
        { 
         FileName = item.Headers.ContentDisposition.FileName, 
         // Content = fileBytes, // No need to pass the info back as we're not going to read it save it yet 
         Key = Guid.NewGuid().ToString(), 
         Type = item.Headers.ContentDisposition.DispositionType 
        }; 
        resultOut.Add(file); 
        //using (Stream stFileSource = new MemoryStream(await item.ReadAsByteArrayAsync()))      { 
        // byte[] fileBytes; 

        // fileBytes = new Byte[stFileSource.Length]; 
        // stFileSource.Read(fileBytes, 0, Convert.ToInt32(stFileSource.Length)); 
        // FileUploadResult file = new FileUploadResult() 
        // { 
        //  FileName = item.Headers.ContentDisposition.FileName, 
        //  // Content = fileBytes, // No need to pass the info back as we're not going to read it save it yet 
        //  Key = Guid.NewGuid().ToString(), 
        //  Type = item.Headers.ContentDisposition.DispositionType 
        // }; 
        // resultOut.Add(file);        
        //} 
       } 
       return Request.CreateResponse(HttpStatusCode.OK, resultOut.ToArray()); 
      } 
      catch (Exception ex) 
      { 
       System.Diagnostics.Debug.WriteLine(ex.ToString()); 
       return Request.CreateResponse(HttpStatusCode.BadRequest); 
      } 
     } 
     else 
     { 
      return Request.CreateResponse(HttpStatusCode.BadRequest); 
     } 
    } 

またディレクティブは、プロパティにファイルの配列が保存されます私のユーザーフォームは、いくつかのファイルを削除することができます/追加します。より多くのファイルを作成し、ファイルと一緒にフォームから情報を保存したい(やや複雑なビューモデル)。私はそのプロを理解することができませんでした今のところブレイク。私がここに見る1つの可能性は、ファイルをリポジトリを使ってUploadFileメソッドにデータベースに保存することです。しかし、私は実際のテーブルではなく、代わりに一時的なテーブル(#FileInfoテーブルなど)に保存することをお勧めします。または、ファイル(バイナリコンテンツを含む)をいくつかのメモリオブジェクトに保存する方法があるので、モデルのデータを保存する準備ができたら、そのコンテンツを取り戻すことができますか?あなたは、一時的なリポジトリストレージの実装を示すか、または私のジレンマのための他のアイデアを与えることができますか?

答えて

1

まず、あなたの指令は 'multipart/form-data'で投稿リクエストを作成する必要があります。

this linkを参照してください。

ただし、これを行うにはangular file uploadを使用します。

angular 
.module('app', ['angularFileUpload']) 
.controller('AppController', function($scope, FileUploader) { 
    $scope.uploader = new FileUploader(
    { 
     url: 'Your/upload/url', 
     headers: { 
      'autorization': 'Bearer token if you need it' 
     }, 
     onProgressItem: function() { 
      ... 
     }, 
     onSuccessItem: function (opt, data) { 
      ... 
     }, 
     onErrorItem: function (opt) { 
      ... 
     } 
    }); 

    //you may want to wrap the following in an event 
    var uploadItem = $scope.uploader.queue[uploader.queue.length - 1]; 
    uploadItem.formData.push({ 
       someData: "someData", 
       moreData: "moreData" 
      }); 

    uploadItem.upload(); 
    uploadItem.formData = []; 

}); 

次に、あなたのコントローラでは、あなたが必要なものを取得するには、次の操作を行うことができます

//your request 
var request = HttpContext.Current.Request; 

//your fields 
var someData = request.Form["someData"]; 
var moreData = request.Form["moreData"]; 

//your file 
var file = request.Files["file"]; 
+0

私の問題は少し後方です。モデルのメインフォームには、これらのアップロードされたファイル(ファイル名)を表示するディレクティブがあり、そのうちのいくつかを追加したり削除したりすることができます。今度は情報を保存するときです。私はファイルの配列を持っています - 私はアップローダを再びインスタンス化する必要がありますか? – Naomi

+1

必要なすべての情報とすべてのメタデータを1つの場所に集めることができれば、そこにアップローダを生成してアップロードすることができます。 – user3682091

+0

私はその考えに取り組んでいます。このアプリケーションではhttps://github.com/danialfarid/ng-file-uploadを使用しています。したがって、私はコントローラに「アップロード」を追加し、コードでインスタンス化し、それがどのように機能するかを見ていきます。 – Naomi

1

はTempDataをのための仕事のように見える:

TempDataをはASP.NET MVCであります基本的に TempDataDictionaryから派生した辞書オブジェクトです。 TempDataは、 という次のHTTPリクエストに対して、現在のリクエストである の場合にのみ残る他のオプション(ViewBagおよびViewData)とは異なります。したがって、TempdDataを使用して、 コントローラーアクションとリダイレクトの間でデータを維持することができます。

例:

//Controller Action 1 (TemporaryEmployee) 
public ActionResult TemporaryEmployee() 
{ 
       Employee employee = new Employee 
       { 
         EmpID = "121", 
         EmpFirstName = "Imran", 
         EmpLastName = "Ghani" 
       }; 
       TempData["Employee"] = employee; 
       return RedirectToAction("PermanentEmployee"); 
} 

//Controller Action 2(PermanentEmployee) 
public ActionResult PermanentEmployee() 
{ 
       Employee employee = TempData["Employee"] as Employee; 
       return View(employee); 
} 
関連する問題