前端读取文件并获取文件的路径

<template>
  <div style="width:100%;height: 100%;" class="bg_cl">
    <a-button type="danger" @click="clickMenuItem">上传</a-button>
    <!--忽略S-->
    <input @change="importInformation($event)"
           style="display: none;"
           id="fileInput" slot="content"
           ref="fileBtn"
           type="file"/>
    <!--忽略E-->
  </div>
</template>

<script>


  export default {
    components: {},
    data() {
      return {}
    },
    methods: {
      clickMenuItem() {
        document.getElementById("fileInput").click()
      },
      // 文件导入
      importInformation(obj) {
        const that = this;
        let file = obj.target.files[0]
        let src = window.URL.createObjectURL(file)
        // 虽然src长这样,但是可以读出来
        // blob:http://localhost:8080/215e5899-d9d7-4dd6-8287-82c96704e240
        console.log(src)
        let docs = this.LoadXMLFile(src)
        console.log(docs)
        // 清空
        that.$refs.fileBtn.value = ''
      },
      LoadXMLFile(xmlFile) {
        let xmlDom = null;
        if (window.ActiveXObject) {
          xmlDom = new ActiveXObject("Microsoft.XMLDOM");
          //xmlDom.loadXML(xmlFile);//如果用的是XML字符串
          xmlDom.load(xmlFile); //如果用的是xml文件。
        } else if (document.implementation && document.implementation.createDocument) {
          let xmlhttp = new window.XMLHttpRequest();
          xmlhttp.open("GET", xmlFile, false);
          xmlhttp.send(null);
          xmlDom = xmlhttp.responseXML.documentElement;//一定要有根节点(否则google浏览器读取不了)
        } else {
          xmlDom = null;
        }
        return xmlDom;
      },
    }
  }
</script>

<style>
  .bg_cl {
    background-color: #42655d;
  }
</style>

2.读取base的路径

      importInformation(obj) {
        const that = this;
        let file = obj.target.files[0];
        let reader = new FileReader();
        reader.onload = function (e) {
          let data = e.target.result;
          // console.log(data)
          let haha = that.LoadXMLFile(data)
          console.log(haha)
        }
        // 清空
        // reader.readAsBinaryString(file);
        reader.readAsDataURL(file);
        that.$refs.fileBtn.value = ''
      }
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容