这里前端项目使用的Vue，这里的操作是点击 +Excel上传 后，立即调用接口编译出上传的内容。
image
文件上传
上传文件需要注意的三点：
- 验证上传文件的大小、格式
- 将文件转化为 formdata 格式
- 接口请求头部改为 multipart/form-data
HTML代码摘要：
<input
ref="uploadInput"
@change="uploadFile"
type="file"
accept="application/vnd.ms-excel, application/vnd.openxmlformats- officedocument.spreadsheetml.sheet"
>
JS代码摘要：
export default {
name: 'BatchUploadModal',
data() {
return {
// 上传文件的文件名
uploadFileName: '',
// 上传文件的错误信息提示
uploadFileErrMsg: '',
// 文件的最大尺寸
fileMaxSize: 2 * 1024 * 1024,
// 文件接受的格式
fileAcceptType: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
};
},
methods: {
// 上传文件
uploadFile() {
// 获取用户信息
const file = this.getUploadFileInfo();
// 这里是为了页面显示需要
this.uploadFileName = `（${file.name}）`;
// 验证文件是否符合要求
if (this.validateUploadFile(file)) {
// 将文件转为formdata格式
const formData = new FormData();
// 'file' 为 HTTP POST 里的字段名
formData.append('file', file);
// 触发父组件的 getUploadPointFileData 方法
this.$emit('getUploadPointFileData', formData);
}
},
// 验证文件是否符合要求（文件是否为空，格式是否正确，大小是否合适）
validateUploadFile(file) {
if (file.size === 0) {
this.setUploadFileErrMsg('上传文件不能为空');
return false;
}
if (!this.validateUploadFileType(this.trim(file.type))) {
this.setUploadFileErrMsg('上传文件格式错误');
return false;
}
if (file.size > this.fileMaxSize) {
this.setUploadFileErrMsg('上传文件大小超过2M');
return false;
}
return true;
},
// 验证文件类型
validateUploadFileType(curFileType) {
const fileTypeArray = this.fileAcceptType.split(',');
let isSuccess = false;
fileTypeArray.forEach((type) => {
const curType = this.trim(type);
if (curType === curFileType) isSuccess = true;
});
return isSuccess;
},
// 设置上传文件错误提示
setUploadFileErrMsg(val) {
this.uploadFileErrMsg = val;
},
// 去除掉多余的空格
trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, '');
},
// 获取用户信息，这里为单文件上传
getUploadFileInfo() {
return this.$refs.uploadInput.files[0];
},
},
};
父文件
getUploadPointFileData(formData) {
this.batchUploadDevicePointFile(formData)
.then((res) => {
const err = res.data.success ? '' : res.data.msg;
this.$refs.batchUploadPoint.setUploadFileErrMsg(err);
})
.catch((err) => {
window.console.log('batchUploadDevicePointFile_err:', err);
});
},
重要：请求需要将请求头部改为 multipart/form-data
// 这里后端提供的批量上传的接口是将批量上传的excel文件转义为代码可见的格式
export const batchUploadDevicePointFile = (file) => {
instance.defaults.headers.common['Content-Type'] = 'multipart/form-data';
return instance.post('/api/admin/devicePoint/uploadExcel', file);
};
image
总结
可参考的文章 文件各种上传，离不开的表单
一直在想为什么上传文件一定要用表单的格式，原来是因为后端普遍对表单格式比较支持，换句话说，表单只是为了满足和后端约定的某种数据格式罢了。
不了解FormData 可以参考下面这篇文章：FormData使用方法详解
文件下载
项目中目前用到的下载模板比较简单，直接放在了a标签里，直接获取了放在服务器某处的文件
HTML摘要
<a href="/api/admin/devicePoint/download">下载模板</a>
其他的方法：
Blob的功能：Blob对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器。
// 接口需要传的 params
let params = {};
// 调用后端接口
api.channelDetailExport(params).then((res) => {
if (res.success) {
let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 创建下载的链接
downloadElement.href = href;
downloadElement.download = 'xxx.xlsx'; // 下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); // 点击下载
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
}
})
