导入JSON文件失败：报unsupported protocol blob及AxiosError错误求助

Axios是专门处理HTTP/HTTPS类网络请求的工具，不支持本地的blob:协议。你代码里用Axios去请求文件的本地预览地址（blob://开头），自然会抛出“unsupported protocol blob”错误。而且完全没必要这么做——你已经拿到了本地文件对象，直接读取就行，绕Axios纯粹是多此一举。

直接修改jsonimporter.js里的onUploadButtonClick方法，删掉Axios请求部分，直接用FileReader读取本地文件：

onUploadButtonClick = () => {
    this.setState({ submitLoading: true });
    // 直接获取本地文件对象
    const targetFile = this.props.existingFileData[0].file;
    const reader = new FileReader();

    // 读取文件内容为文本
    reader.readAsText(targetFile);
    
    reader.onloadend = () => {
        const jsonContent = reader.result;
        // 原逻辑保留
        if (this.isValidJSON(jsonContent)) {
            this.callNBI(JSON.parse(jsonContent));
        } else {
            this.callNBI(jsonContent);
        }
        // 记得请求完成后关闭加载状态
        this.setState({ submitLoading: false });
    };

    // 增加文件读取失败的处理
    reader.onerror = () => {
        console.error('文件读取失败', reader.error);
        this.setState({ submitLoading: false });
        // 这里可以加前端错误提示，比如弹出通知
    };
};

你在axiosservice.js里给所有Axios请求加了Authorization等头信息，但本地文件读取根本不需要这些，不过这不是核心问题——核心就是别用Axios碰本地blob地址。如果之后要把文件上传到服务器，应该用FormData封装文件，再通过Axios POST到服务器接口，而不是请求本地预览链接。

内容的提问来源于stack exchange，提问作者jaanaki