<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
网友评论