前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的value值。

来看一个故事。

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的value值。

首先，需要文件选择，可以自己封装一个组件，当然也可以使用elementUI中的el-upload组件，一切随缘。

我选择了第一种，创建一个FileSelector.vue工具组件。

<template>
  <div>
    <input
      v-if="this.text == '选择文件'"
      type="file"
      ref="file"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <input
      v-else-if="this.text == '添加附件'"
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <el-button @click="oninput" size="mini" :class="style">
      {{ text }}
    </el-button>
  </div>
</template>
<script>
export default {
  props: ["text"],
  data() {
    return {
      style: "",
      jsonObj: {},
    };
  },
  mounted: function () {
    if (this.text == "添加附件") {
      this.style = "tjfj";
    }
  },
  methods: {
    async handleFileChange(e) {
      if (this.text == "选择文件" && e.target.files[0] != null) {
        this.$emit("input", e.target.files[0]);
      } else {
        this.$emit("input", e.target.files);
      }
    },
    oninput() {
      this.$refs["file"].click();
    },
  },
};
</sript>
<style>
.tjfj {
  float: right;
}
</style>

父组件中应用

  <file-selector
        v-model="otherAttachmentList"
        :text="texttype2"
  ></file-selector>

好了，现在file-selector组件已经拿到xml文件，但是要怎样操作才能拿到具体想要的值嘞？

我尝试了很多方法，第一种(网上搜的)，new一个新的DOMParser() 构造函数，新建一个 DOMParser 对象实例，使用parseFromString（）方法，parseFromString（）方法解析包含 HTML或XML 的字符串。

getXMLNode(parm){
      let str=parm.xmlStr;
      //创建文档对象
      //DOMParser() 构造函数新建一个 DOMParser 对象实例。此对象可用于使用该方法分析文档的文本。
      //parseFromString（）方法解析包含 HTML或XML 的字符串，返回 HTMLDocument或XMLDocument
      let xmlDoc = new DOMParser().parseFromString(str, "text/xml");
      let finds=xmlDoc.getElementsByTagName('find');   //获取find节点
      for (let i=0;i<finds.length;i++){     //循环节点
        let finder = finds[i];
        let nods = finder.childNodes;       
        for (let j=0;j<nods.length;j++){    //循环子节点
          let child = nods[j]
          if (child.nodeType == 1){         //判断是否是标签
            console.log(child.nodeName+":"+child.firstChild.nodeValue)  
            // console.log(child.nodeName+child.innerHTML);   
            //两种方法取值
          }
        }
      }
      return finds
    }

网页不允许呀，搜了很多文章（浏览这篇文章https://www.cnblogs.com/DOMLX/p/7822962.html），才知道是因为目前的主流浏览器都不支持解析本地的XML的文件，应该是为了一些安全问题之类的，不能够直接的去解析XML文件。所以这个方法彻底失败。

第二种方法，就是既然能拿到文件，读不出xml文件的内容，那就干脆把他转为文本格式，这样就能直接拿到文本内容，但是拿到文本内容，需要读取里边的值，应该怎样拿到相应的值嘞？

我能想到的是使用正则匹配，还有一种，是下载x2js依赖，然后我使用的是下载依赖，使用这个对象直接将内容转化成json对象，接下来展示，我怕直接放方法有的读者看不懂，所以我直接放代码，有点冗余，见谅。

<template>
  <div>
    <input
      v-if="this.text == '选择文件'"
      type="file"
      ref="file"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <input
      v-else-if="this.text == '添加附件'"
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <el-button @click="oninput" size="mini" :class="style">
      {{ text }}
    </el-button>
  </div>
</template>
<script>
export default {
  props: ["text"],
  data() {
    return {
      style: "",
      jsonObj: {},
    };
  },
  mounted: function () {
    if (this.text == "添加附件") {
      this.style = "tjfj";
    }
  },
  methods: {
    async handleFileChange(e) {
      if (this.text == "选择文件" && e.target.files[0] != null) {
        await this.getXMLNode(e.target.files[0]);
        this.$emit("input", e.target.files[0]);
      } else {
        await this.getXMLNode(e.target.files);
        this.$emit("input", e.target.files);
      }
    },
	// 拿到xml文件，并使用x2js解析该文件拿到相应的值。
    getXMLNode(parm) {
      let reader = new FileReader();
      reader.readAsText(parm[0], "UTF-8");
      let _self = this;
      reader.onload = function () {
          // .annotation.object这个是我文件内容里的东西，根据个人而定。
        this.jsonObj = _self.$x2js.xml2js(this.result).annotation.object;
        // console.log(this.jsonObj);
        // console.log(this.jsonObj["name"]);
        // console.log(this.jsonObj.name);
      };
    },
    oninput() {
      this.$refs["file"].click();
    },
  },
};
</script>
<style>
.tjfj {
  float: right;
}
</style>