web apiを使用してJSONデータとZipファイルを投稿するには？

Question

ローカルコンピュータに.Zipとして出力をダウンロードできるエクスポート機能を備えた角度のあるプロジェクトを作成しました。

ここで、ローカルにダウンロードする代わりにウェブAPIを使用してzipファイルをサーバーに直接アップロードする新しい機能を追加する予定です。私は自分の機能をローカルにダウンロードして変更し、それを外部のサーバーにプッシュするように変更しようとしています（しかし動作しません）。 私は角度があるので新しいです。ガイド用

おかげで、私は以下のような機能を作成しています：

@floc更新

private function zip($path, $id) 
    { 
     $realPath = realpath($path); 
     $absolute = $realPath.DIRECTORY_SEPARATOR; 
     $ignore = array(realpath($this->exportsPath), $realPath); 

     //delete old zip if it exists 
     if (is_file($absolute.$id.'.zip')) { 
      unlink($absolute.$id.'.zip'); 
     } 

     $zip = new ZipArchive(); 
     $zip->open($absolute.$id.'.zip', ZipArchive::CREATE); 

     $files = new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator($realPath), \RecursiveIteratorIterator::SELF_FIRST); 

     foreach ($files as $file) 
     { 
      $path = $file->getRealPath(); 

      if (! in_array($file->getRealPath(), $ignore)) { 
       if (is_dir($file)) 
       { 
        $zip->addEmptyDir(str_replace($absolute, '', $path));    
       } 
       else if (is_file($file)) 
       { 
        $zip->addFromString(str_replace($absolute, '', $path), file_get_contents($file)); 
       } 
      } 
     } 

     if ($zip->close()) { 
      return $absolute.$id.'.zip'; 
     } 
    } 

ではなく、zipファイルとして保存私は1つのWeb APIを使用して、そのzipファイルをアップロードしたいのクリック。私はそれを修正したいが、これはまだ運がない。 :(

任意の助けてくれてありがとうと提案を。

Answer 1

これは角度でこれを行うことができる方法である。あなたが新しいディレクティブを定義する必要があります

1）新しいディレクティブ

を宣言しますコントローラに<input type="file" />をバインドします。

.directive("fileArg", [function() { 
    return { 
     scope: { 
      fileArg: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
        scope.fileArg = changeEvent.target.files[0]; 
       }); 
      }); 
     } 
    } 
}]); 

今、あなたのHTMLに：

<input type="file" file-arg="vm.zipFile" /> 

2）は、

今、あなたのAPI

function importFile() { 

    var formData = new FormData(); 
    formData.append("data", $scope.zipFile); 

    var options = { 
     headers: { 
      "Content-Type": undefined 
     } 
    }; 

    this.ohttp.post("yourApiUrl", formData, options).then(r => { 

     if (r.data.Error) { 
      // Do something 
     } 

     // Do something else 

    }); 

} 

3）あなたのAPIでファイルを読むにあなたをファイルの送信しますあなたが送ったファイルを読む必要があります。そのためにはMultipartFormDataMemoryStreamProviderを使用します。

[Route("yourApiUrl")] 
[HttpPost] 
public async Task<dynamic> ImportZipFileAsync() 
{ 
    try 
    { 
     model = await ReadZipFile(); 
    } 
    catch (Exception e) 
    { 
     return new { Error = true, Message = e.Message }; 
    } 

    return "success"; 
} 

private async Task ReadZipFile() 
{ 
    var provider = new MultipartFormDataMemoryStreamProvider(); 

    await Request.Content.ReadAsMultipartAsync(provider); 

    var file = provider.FileStreams.FirstOrDefault(); 

    if (file.Value != null) 
    { 
     var fileName = file.Key; 
     var fileData = file.Value; 

     if (!fileName.ToLowerInvariant().EndsWith(".zip")) 
     { 
      throw new FileLoadException("Wrong file type"); 
     } 

     var data = new MemoryStream(); 
     fileData.CopyTo(data); 
     var dataBytes = data.ToArray(); 

     // Do whatever you want with your dataBytes 
    } 
    else 
    { 
     throw new ArgumentNullException("file.Value"); 
    } 
}