一、需求
把.xls文件转换成.xlsx文件,入参为file对象,转换成功后,把结果转成file对象,vue前端怎么实现?
二、要点
1. 设置headers中的content-type
重点:''multipart/form-data''
headers: {
'Content-Type': 'multipart/form-data',
},
2. 参数传递
重点: FormData
let params = new FormData();
params.append('file', file);
let name = file.name;
xlsToXlsx(params).then(res=>{
// ...
})
3. 接收后台返的blob
需要设置responseType为blob
{
responseType: 'blob'
}
4. 将接收不到的bolb转成file对象
let params = new FormData();
params.append('file', file);
let name = file.name;
xlsToXlsx(params).then(res=>{
// 将blob转成file对象
let file = new FileReader();
file.readAsDataURL(res);
file.onload = function () {
console.log(file.result)
// 可以做其他操作
// ......
};
})
三、完整代码
1. api.js
// api.js
export function xlsToXlsx(params: object) {
return request({
url: '/file-operation/convert-xls-file-to-xlsx',
responseType: 'blob',
headers: {
'Authorization': `Bearer ${Session.get('token')}`,
'Content-Type': 'multipart/form-data',
},
method: 'post',
data: params
});
}
2. vue文件中的使用
const handleXlsToXlsx = (file) => {
const files = file;
if (files == null || files.length == 0) {
alert('No files wait for import');
return;
}
let name = files.name;
let suffixArr = name.split('.'),
suffix = suffixArr[suffixArr.length - 1];
if(suffix == 'xls') {
let params = new FormData();
params.append('file', file);
let name = file.name;
xlsToXlsx(params).then(res=>{
let file = new FileReader();
file.readAsDataURL(res);
file.onload = function () {
console.log(file.result)
// 可以做其他操作
// ......
};
})
}
};