将表单数据发送到服务器时，不会收到文件

Question

我正在尝试将表单数据发送到我的服务器（Asp.net服务器），但是在调试服务器时只收到输入的类型信息，但文件不存在。

这是我的html页面：（http://pastebin.com/KZERsepn）

<template>
<ai-dialog>
    <ai-dialog-body>
        <div>
            <span>character name</span>
            <input type="text" value.bind="user.name" />
        </div>
        <div>
            <span>Youtube url:</span>
            <input type="text" value.bind="user.YoutubeUrl" />
        </div>
        <div>
            <span>ProfileImage:</span>
            <input type="file" file.bind="user.ProfileImage" />
        </div>
        <div>
            <span>CoverImage:</span>
            <input type="file" file.bind="user.CoverImage" />
        </div>
    </ai-dialog-body>

    <ai-dialog-footer>
        <button click.trigger="controller.cancel()">Cancel</button>
        <button click.trigger="controller.ok(user)">Ok</button>
    </ai-dialog-footer>
</ai-dialog>

这就是我发布数据的方式：（http://pastebin.com/7bVHZthE）

createUser(user) {
    let model = new FormData();
    model.append('Name', user.Name);
    model.append('YoutubeUrl', user.YoutubeUrl);
    model.append('ProfileImage', user.ProfileImage);
    model.append('CoverImage', user.CoverImage);

    return this.client.fetch('/api/createUser', {
        method: "post",
        body: model,
        headers: {
            'Access-Controll-Allow-Origin': '*',
            'Accept': 'application/json'
        }
    });
}

但只有user.name和user.youtubeurl属性被发送到服务器。

Answer 1

要发布文件，您必须使用multipart / form-data

发布multipart/form-data的技巧（相当不直观）将内容类型标头强制为false。所以试试这个：

return this.client.fetch('/api/createUser', {
    method: "post",
    body: model,
    headers: {
        'Content-type': '', // this is where the magic happens
        'Access-Control-Allow-Origin': '*',
        'Accept': 'application/json'
    }
});