最近项目中有个需求是:先上传一个文件,然后后端对上传的文件进行一些处理,然后再把处理后的数据,用数据流的形式传到前端来。
着急的童鞋可以直接拉到底部看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
希望本文对你有所帮助!