使用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的数据格式为

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文哈哈wcx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值