<template>
<div class="p-content">
<div>
<input @change="handleGetFile" type="file" id="file" />
</div>
</div>
<!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
import {Room} from './types/room'
@Options({
components: {
HelloWorld,
},
})
export default class App extends Vue {
list: Room[] = [];
handleGetFile(file: any) {
const dom = document.getElementById('file') as HTMLInputElement;
if (dom && dom.files) {
console.log(dom.files);
const file = dom.files[0];
const types = file.name.split('.')[1];
const fileType = ['json'].some(
(item) => item === types
);
if (!fileType) {
alert('格式错误,请上传excel类型文件');
return;
}
this.handleReadFile(file)
}
}
handleReadFile(file: File) {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (thisFile)=>{
if(thisFile.target && thisFile.target.result) {
const result = JSON.parse(thisFile.target.result.toString())
console.log(result)
}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vue/html input 读取 json数据
最新推荐文章于 2024-01-05 11:47:12 发布