如何使用web api發佈JSON數據和Zip文件？

Question

我創建了一個帶導出功能的角度項目，能夠將輸出作爲.Zip下載到本地計算機。

現在，我打算添加一個新功能，將zip文件直接上傳到服務器，而不是使用web API下載到本地，是否有可能使用angular？我正在考慮修改我的下載到本地的功能，並將其更改爲推送到外部服務器（但不工作）。 因爲我是新角度。

@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文件我一個利用網絡API要到壓縮文件上傳單擊。我想修改它，但仍然沒有運氣。 :(

感謝您的幫助和建議。

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"); 
    } 
}