vue 前端给接口传file对象需要注意的问题

一、需求

        把.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)
            // 可以做其他操作
            // ......
        };
    })
  }
};