如何使用web api发布JSON数据和Zip文件？

Question

我创建了一个带导出功能的角度项目，可以将输出作为.Zip下载到本地计算机。

现在，我计划添加一项新功能，使用Web 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文件我希望只需点击一下即可使用web api上传该zip文件。我想修改它，但仍然没有运气。 ：（

感谢您提供任何帮助和建议。

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