如何在JavaScript中读取修改XML文件并更新对应的File对象？

首先要明确：浏览器中的File对象是只读的，无法直接修改原对象，只能基于修改后的内容创建新的File对象。以下是完整的实现步骤：

1. 读取File对象中的XML内容 #

使用FileReader读取File的文本内容：

function readXmlFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(new Error('读取文件失败'));
    reader.readAsText(file);
  });
}

2. 解析XML并修改内容 #

用DOMParser解析XML文本为DOM文档，之后就可以像操作HTML DOM一样修改XML节点：

async function modifyXml(file) {
  // 先读取文件内容
  const xmlText = await readXmlFile(file);
  
  // 解析XML
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
  
  // 检查解析是否成功
  const parseError = xmlDoc.querySelector('parsererror');
  if (parseError) {
    throw new Error('XML解析失败');
  }
  
  // 示例：修改指定节点的内容
  // 比如找到<name>节点并修改其文本
  const nameNode = xmlDoc.querySelector('name');
  if (nameNode) {
    nameNode.textContent = '修改后的名称';
  }
  
  // 示例：添加新节点
  const newNode = xmlDoc.createElement('newElement');
  newNode.textContent = '新节点内容';
  xmlDoc.documentElement.appendChild(newNode);
  
  // 序列化修改后的XML为字符串
  const serializer = new XMLSerializer();
  return serializer.serializeToString(xmlDoc);
}

3. 创建新的File对象 #

将修改后的XML字符串生成新的File对象，保留原文件的名称和MIME类型：

async function updateFile(originalFile) {
  try {
    const modifiedXml = await modifyXml(originalFile);
    // 创建新的File对象
    return new File([modifiedXml], originalFile.name, {
      type: originalFile.type || 'application/xml',
      lastModified: Date.now()
    });
  } catch (err) {
    console.error(err);
    return null;
  }
}

使用示例 #

// 假设你已经获取到原File对象，比如通过<input type="file">选择
const originalFile = ...; // 你的原File对象
updateFile(originalFile).then(newFile => {
  if (newFile) {
    console.log('新的File对象已生成', newFile);
    // 这里可以用newFile进行后续操作，比如上传、保存等
  }
});

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