【问题标题】：How to Post JSON data and Zip File using web api?如何使用 web api 发布 JSON 数据和 Zip 文件？
【发布时间】：2017-01-03 13:33:23
【问题描述】：

我创建了一个具有导出功能的 Angular 项目，以便能够将输出作为 .Zip 下载到本地计算机。

现在，我计划添加一个新功能，使用 Web API 将 zip 文件直接上传到服务器，而不是下载到本地，是否可以在 Angular 上使用？我正在考虑修改我的功能以下载到本地并将其更改为推送到外部服务器（但不工作）。因为我是 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 文件，我想一键使用 web api 上传该 zip 文件。我想修改它，但仍然没有运气。 :(

感谢您的任何帮助和建议。

【问题讨论】：

Zip 文件不能很好地转换为 JSON。最好将它们发布为application/zip 或application/octet-stream。

标签： angularjs api http-post

【解决方案1】：

这就是使用 Angular 的方法。

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

【讨论】：