文件的上传和下载
文件上传
上传文件需要注意的三点:
- 验证上传文件的大小、格式
- 将文件转化为 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对象
}
})
最后分享一款上传下载控件:详细信息可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0%e5%92%8c%e4%b8%8b%e8%bd%bd-2/