<template>
<div>
<el-input v-model="fileName" style="width:50%" />
<input ref="file" style="display: none" type="file" accept=".json" @change="handleClick">
<el-button style="width: 20%; margin-left:10px" type="primary" @click="openFolderDialog">浏览</el-button>
<el-button style="width: 20%" type="primary" @click="importFile">导入</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fileName: '',
fileContent: ''<

本文展示了如何在Vue.js应用中实现一个简单的文件上传组件,用于读取和导入.json文件。通过HTML的input元素隐藏文件选择器,并结合Vue.js的数据绑定和事件监听,当用户选择文件后,使用FileReader API读取文件内容为文本,然后转换为JSON对象。点击导入按钮后,将解析后的JSON数据打印到控制台。
最低0.47元/天 解锁文章
4109

被折叠的 条评论
为什么被折叠?



