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

• 前端

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

  
        
      



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) => {});
  };

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/1b46b0f0eb.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐