将返回的blob对象转为json数据

最近项目中有个需求是：先上传一个文件，然后后端对上传的文件进行一些处理，然后再把处理后的数据，用数据流的形式传到前端来。

着急的童鞋可以直接拉到底部看blob对象转为json的核心代码。

因为其他的增删改查接口都是统一封装的，对response的code进行统一处理：

就是用的 axios.interceptors.response.use() 对不同的code值进行不同的处理，因为不同的code代表不同的意义。

但是现在这个导入之后再导出文件的请求有个问题，它的返回值没有code值，所以这里单独写了一个：

export function importExport(data: any, token: any) {
    const $http = axios.create({
        baseURL: '/api',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': '*/*',
            'Authorization': token,  // 别忘了加token
        },
        responseType: 'blob',  // 注意这个 type 是 blob
    })
    return $http.post<Interface>(`your url`, data);
}

但是这样写的话有个问题：如果导入文件成功然后再返回数据流是没问题的，但是如果导入文件由于某些原因导致导入失败了呢，那么返回值就会是code data 那些，这个时候要根据不同的code对用户进行提醒，可以返回的是blob对象啊，所以需要把blob对象转为json，并且对不同的情况进行处理。

const filesChange = async (files) => {
// 这里是监听一个上传组件的变化事件
    if (files && files.length > 0) {   // 排除对清空文件的处理
      const formdata = new FormData();
      formdata.append('file', files[0].file);
      const param = {
        file: formdata,
      };
      try {
      // token 是自己获取登录返回的token
        const res: any = await importExport(formdata, token);
        const reader = new FileReader();
        reader.readAsText(res.data, 'utf-8');
        reader.onload = function () {
          const t = JSON.parse(reader.result as string);
          if (t.code === 0) {
            data.uploadStateTxt = '成功';
            Message.success('上传成功！');
          } else if (t.code === 101) {
            Modal.error({
              title: '登录超时',
              content: '登录超时，请重新登录',
              okText: '重新登录',
              async onOk() {
                router.push({
                  name: 'login',
                });
              },
            });
          }
        };
      } catch {
        data.uploadStateTxt = '失败';
        Message.error('上传失败！');
      }
    }
  };

把blob对象转为json的核心代码：

const reader = new FileReader();
reader.readAsText(res.data, 'utf-8');
reader.onload = function () {
  const t = JSON.parse(reader.result as string);  // 这里就得到了json

希望本文对你有所帮助！