使用ant design vue的a-upload上传组件，自定义上传事件，点了导入图标按钮就自动打开了电脑上的文件夹，将选中的.json文件里的数据解析出来页面使用（纯前端操作）

使用FileReader对象读取文件内容，最后将文件内容进行处理使用

<template>  <a-upload :accept="acceptType.toString()" :showUploadList="false" :before-upload="beforeUpload" :customRequest="customUpload">        <i class="iconfont icon-daoru icon-size icon-hover"></i>      </a-upload></template><script>const acceptType = ['application/json'];  const dataFn: any = ref();  const beforeUpload = (file) => {    dataFn.value = () => {      return new Promise((resolve, reject) => {        console.log(file);        if (acceptType.find((type) => type === file.type)) {          resolve(true);        } else {          message.warn('请上传正确格式文件');          reject(false);        }      }).finally(() => {});    };  };  // 自定义上传  const customUpload = (data) => {    dataFn      .value()      .then((res) => {        console.log(data, res);        if (res) {          const reader = new FileReader();          console.log(reader);          reader.onload = (e) => {            const fileContent = e.target.result;            console.log(fileContent, JSON.parse(fileContent));          };          reader.readAsText(data.file);        }      })      .catch((_err) => {});  };</script>

reader.readAsText(data.file)中data.file的数据格式为

本文链接：https://www.kjpai.cn/news/2024-03-31/151265.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！