1.将文件流转Blob对象并动态创建a标签下载excel表格
<el-button size="small" @click.stop="downloadTemplate"> <i class="el-icon-download" /> 模板下载</el-button>
downloadTemplate () {
let downloadName = '下载模板1.xlsx' //文件名
let params ={
excelType:5}
// 服务实例下载
// let a = document.createElement('a');
// let event = new MouseEvent('click');
// a.download = '映射模板';
// a.href = this.downloadUrl;
// a.dispatchEvent(event);
getTemplateOSE( params ).then(res => {
if (res.status === 500) {
this.$message.error(res.message);
return
}
// 文件流下载
let blob = new Blob([res], {
type: "application/ms-excel;charset=utf-8" });
const link = document.createElement('a'); //创建下载a标签
link.href = URL.createObjectURL(blob);
link.download = downloadName; //下载后文件名
link.style.display = 'none'; //默认隐藏元素
document.body.appendChild(link); // body中添加元素
link.click(); // 执行点击事件
URL.revokeObjectURL(link.href); //释放Blob对象
document.body.removeChild(link);//下载完成后移除元素
})
},
2.文件自定义上传
<el-upload
class="upload_values"
ref="upload"
action
:file-list="fileList"
:on-change="fileStatusChange"
:on-remove="handleRemove"
:auto-upload="false"
:limit="1"
:http-request="defendFileUpload"
accept=".xls,.xlsx"
></el-upload>
// 自定义上传方法
defendFileUpload (param) {
this.isUploadLoding = true; // 确认按钮 loading
let formData = new FormData();
formData.append("file", param.file);
// 有额外参数的时候 例如：uploadParams = { name: 'abcd' }
if (uploadParams) {
Object.keys(uploadParams).forEach(item => {
formData.append("" + item + "", uploadParams[item]);
})
}
// 通过进度条事件onUploadProgress获取上传文件的进度，显示进度信息
const config = {
onUploadProgress: (progressEvent) => {
this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2) > 0 ?
(progressEvent.loaded / progressEvent.total * 100).toFixed(2) - 10 :
(progressEvent.loaded / progressEvent.total * 100).toFixed(2))
}
}
this.isShowProgress = true; // 显示上传进度条
this.fileUploadMethods(formData, config).then(response => {
if (response.status === 200) {
this.$message({
type: 'success',
message: response.message
})
this.progressPercent = 100; // 上传成功之后进度条为100
// this.fileUploadTips = response.message; //上传成功的提示
this.textSheet = true;
this.$refs.upload.clearFiles(); // 清空文件
this.isAllowUpload = false; // 允许继续上传
setTimeout(() => {
this.close(); // 关闭弹窗
this.$emit('refresh'); // 重载
}, 500)
} else {
this.progressPercent = 0; // 重置进度条
this.isShowProgress = false; // 隐藏上传进度条
this.fileUploadTips = response.message; // 上传失败的提示
this.textSheet = false; // false 为上传失败时的样式
}
this.isUploadLoding = false;
}).catch(err => {
this.progressPercent = 0; // 重置进度条
this.isShowProgress = false; // 隐藏上传进度条
this.fileUploadTips = '上传失败';
this.textSheet = false;
this.isUploadLoding = false;
})
},
// 上传接口
fileUploadMethods(data, config) {
return request({
url: '上传地址，例如"api/mdm/msd-business-unit/importBusinessUnitExcel"',
method: "post",
headers: {
"Content-Type": "multipart/form-data", //如果写成contentType会报错
},
onUploadProgress: config.onUploadProgress,
data,
});
},
3.图片上传
主要贴出来上传图片的代码
<el-upload
action
:class="{ upload_userImg: hideUpload, upload_zx: true }"
ref="uploadUser"
list-type="picture-card"
:auto-upload="false"
:file-list="userFileList"
:on-change="userImgOnChange"
:on-remove="userImgOnRemove"
:limit="1"
accept=".jpg, .png, .jpeg, .svg"
>
<i class="el-icon-plus"></i>
</el-upload>
// 文件状态改变的回调
userImgOnChange (file, fileList) {
let formData = new FormData();
formData.append("file", file.raw);
formData.append("dir", "porDir");
this.employeePictureUpload(formData, "porDir");
},
// 图片上传
employeePictureUpload (formData, type) {
infoMediaApi.uploadFileFTP(formData).then((res) => {
if (res.status === 200) {
if (type === "porDir") {
// 照片
this.form.employeePortraitUrl = res.data;
}
this.$message({
type: "success",
message: "上传成功",
});
}
});
},
// 图片上传接口
uploadFileFTP (data) {
return request({
url: 'api/mdm/msd-file/uploadFileFTP',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data' // 如果写成contentType会报错
},
data
})
}