使用axios将XML文件从vue上载到asp。网芯

Question

我正在努力使用axios将xml文件上载到我的asp。net服务器。我正在使用vue端的以下代码获取一个xml文件，该文件正在工作，然后将其上载到我的服务器：

uploadXmlFile(file: any) {
    const rawFile = new XMLHttpRequest();
    rawFile.open('GET', file, false);
    rawFile.onreadystatechange = () => {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status === 0) {
                const allText = rawFile.responseText;

                axios.post(`${url}`, rawFile, {
                headers: {
                    'Content-Type': 'application/xml',
                    'Accept-Language': 'application/xml',
                },
                });
            }
        }
    };
    rawFile.send(null);
}

在asp。net端我得到了这个函数：

[HttpPost]
public IActionResult Post(object xml)
{
    // Do something with the xml
    ...
}

上载文件会导致代码415：不支持的媒体类型。

我找到了一些建议将xml格式化程序添加到我的项目中，这不起作用，而且我不想解析xml文件，我只想将文件保存到我的文件系统中。

我尝试将原始文件和解析的文本与不同的媒体类型（例如text/plain、text/xml和application/xml）结合起来上传

我还试着添加了接受语言

我还尝试了微软留档中的建议方法，该方法具有以下功能标题：公共异步任务

我试着和邮递员一起调试，上传了一张简单的图片，这给了我同样的错误。

Answer 1

首先，关于您的前端，您需要发送allText常量，而不是rawFile。所以你的代码会是这样的：

axios.post(
    url,
    allText,
    {
        headers: {
            'Content-Type': 'application/xml'
        }
    }
)

现在，对于您的后端，ASP。默认情况下，NET core无法识别xml。您需要转到文件启动。位于应用程序根目录和方法ConfigureServices上的cs需要添加服务。AddXmlSerializerFormatters（）。因此，您的代码如下所示：

services
    .AddMvc()
    .AddXmlSerializerFormatters()
    .SetCompatibilityVersion(CompatibilityVersion.Version_2_1); // this depends on your .net core version

您还必须为要解析的xml创建一个类模型。例如，如果您有这样一个xml

<document>
    <id>12345</id>
    <content>This is a Test</content>
    <author>vchan</author>
</document>

你应该有一个类模型像下面的一个

[XmlRoot(ElementName = "document", Namespace = "")]
public class DocumentDto
{
    [XmlElement(DataType = "string", ElementName = "id")]
    public string Id { get; set; }

    [XmlElement(DataType = "string", ElementName = "content")]
    public string Content { get; set; }

    [XmlElement(DataType = "string", ElementName = "author")]
    public string Author { get; set; }
}

另外，. net可以自己理解原始的xml主体，因此，您的控制器的操作应该如下所示

[HttpPost]
public IActionResult TestMethod([FromBody] DocumentDto xml) {
    // Do something with the xml
}

请注意，您应该始终对请求使用HTTP标头Content-Type： Application/xml，以便. net理解、解析和反序列化它。你不需要为你要实现的每个不同的动作重新发明轮子，. net会为你做到这一点！

Answer 2

如果您这样编写后端，它将始终尝试将内容序列化到JSON，因为默认的序列化程序。如果发送内容类型XML，它将不知道如何将XML反序列化为对象。

这是我们通常处理文件上载的方式：

[HttpPost]
public async Task<IActionResult> ReceiveFileUpload(CancellationToken cancellationToken = default(CancellationToken))
{
    var contentType = Request.ContentType; // Or HttpContext.Request
    var stream = Request.Body; // Or HttpContext.Request
    // Process file stream in whatever way, e.g. XmlDocument.Load(stream);
}

这至少应该使它工作在例如。邮差。

您的axios客户端看起来几乎正常，需要注意以下几点：

• 您可能想发布alltext，而不是rawFile
• 您应该删除“Accept-Language”：“application/xml”
• 我们通常使用文件阅读器来获取文件，但不太确定您在做什么，以及这是否正确

            axios.post(url, content, {
                headers: {
                    "Content-Type": "application/xml"
                }
            })

<input type='file' accept='text/plain' onchange='openFile(event)'>

var openFile = function(event) {
    var input = event.target;
    var text = "";
    var reader = new FileReader();
    var onload = function(event) {
        text = reader.result;
        console.log(text);

    };

    reader.onload = onload;
    reader.readAsText(input.files[0]);

};

(https://codepen.io/mlasater9/pen/jqQdOM/)