如何使用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"); 
    } 
}