React中如何读取本地XML文件内容并完成解析？

我在React应用中尝试读取本地XML文件并解析，但遇到了问题，具体情况如下：

当前代码与问题 #

我用useState存储上传的文件，代码如下：

const [xml, setXML] = useState(null)

function handleUpload(event) {
    setXML(event.target.files[0])
    console.log(xml)
}

return (
    ...
    <input type='file' accept="text/xml" onChange={handleUpload} />
    ...
);

控制台输出的是File对象：

File { name: "filename.xml", lastModified: 1717088034013, webkitRelativePath: "", size: 44452, type: "text/xml" }

展开后看不到实际XML内容，显然这种方式没拿到文件的实际数据。我疑惑的是，很多方案用fetch，但本地文件没必要用fetch吧？

之后我尝试用xml2js解析，代码如下，但控制台输出undefined：

const [xml, setXML] = useState(null)
const [xmlData, setXMLData] = useState(null)

useEffect(() => {
    var parseString = require('xml2js').parseString;
    parseString(xml, function (err, result) {
        setXMLData(result);
        console.log(result)
    });
}, [xml])

解决方案 #

问题核心是你只存储了File对象，没有读取文件的实际内容。File对象只是文件的元数据容器，需要用FileReader读取文件文本内容：

1. 修改上传处理函数，读取文件实际内容：

const [xmlContent, setXmlContent] = useState(null)
const [xmlData, setXMLData] = useState(null)

function handleUpload(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const content = e.target.result;
            setXmlContent(content);
        };
        reader.readAsText(file);
    }
}

2. 调整useEffect解析逻辑，确保传入XML文本字符串：

useEffect(() => {
    if (!xmlContent) return;
    
    const parseString = require('xml2js').parseString;
    parseString(xmlContent, (err, result) => {
        if (err) {
            console.error('解析XML出错:', err);
            return;
        }
        setXMLData(result);
        console.log(result);
    });
}, [xmlContent])

关键说明 #

• File对象仅包含文件名、大小等元数据，不包含文件实际内容，必须通过FileReader读取。
• 本地文件不需要用fetch，fetch用于请求网络资源，FileReader是处理本地文件的正确方式。
• xml2js的parseString方法需要传入XML文本字符串，而非File对象，这是之前解析返回undefined的直接原因。

内容的提问来源于stack exchange，提问作者Rodolfo