美文网首页
前端读取文件并获取文件的路径

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

作者: 我背井离乡了好多年 | 来源:发表于2021-06-28 22:59 被阅读0次
<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

相关文章

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

    2.读取base的路径

  • Android极速开发之SD卡缓存文件

    读取某个文件夹中的所有Apk文件路径并打开安装页面 读取某文件夹下的所有apk文件 获取SD卡跟目录中的某个文件 ...

  • java获取文件路径

    1. 前言 Java 开发中我们经常要获取文件的路径,比如读取配置文件等等。今天我们就关于文件的路径和如何读取文件...

  • Flutter Flie本地文件读写

    获取临时存储路径 往文件写数据 读取文件数据 删除

  • NSFileManager文件操作

    // 获取Documents路径 // 创建文件夹 // 创建文件 // 写文件 // 读取文件内容 // 判断文...

  • node遍历文件夹并读取文件内容

    先引入node原生方法 先选择要遍历的文件夹 读取文件列表 遍历每个文件 获取文件的本地路径 读取文件信息 判断是...

  • python 文件操作

    fp=open("文件路径","方式") 文件读取 文件写入 文件关闭 文件读取写入方式

  • 共读Python编程-异常卡

    文件读取 读取整个文件 open() 打开读取文件read()读入文件with用于自动关闭文件流 文件路径 相对路...

  • IO操作

    标准字符集常量定义类:StandardCharsets.UTF_8 获取文件路径: Read 读取yml文件: I...

  • Winform文件相关操作

    复制文件 获取文件夹下的所有文件名称 创建txt文件,并写入数据 读取txt文件 选择文件夹

网友评论

      本文标题:前端读取文件并获取文件的路径

      本文链接:https://www.haomeiwen.com/subject/iahlultx.html