<template>
<div style="display:flex">
<div style="margin: 30px;">
系统操作手册
</div>
<div class="uploads">
<el-upload ref="upload"
:action="upload.url"
:name="upload.name"
:data="upData"
:limit="1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:on-change="handleFileChange"
:auto-upload="true"
:file-list="fileList"
style="margin: 20px;">
<el-button plain
class="view-option">
上传文件
</el-button>
<div slot="tip"
class="el-upload__tip">
温馨提示:操作手册用于供企业用户阅读并了解系统如何操作使用,支持文件格式:doc .docx .pdf,最多1个文件
</div>
</el-upload>
</div>
</div>
</template>
<script>
export default {
name: 'OperationManualConfig',
data() {
return {
upload: {
url: '//file.geeker.com.cn/uploadOSS',
key: '',
// key: 'WN1EX00HLL8Y0O0K', // 有效osskey
path: 'cloud-platform',
name: 'Filedata'
},
// 上传的文件列表
fileList: []
};
},
created() {
this.getList();
},
methods: {
// 文件上传之前处理
beforeUpload() {
// console.log(file);
// const isExcel = file.name.substring(file.name.lastIndexOf('.') + 1);
// console.log(isExcel);
// const isLtSize = file.size / 1024 / 1024 < 1024;
// console.log(isLtSize);
// if (isExcel !== 'xls' && isExcel !== 'xlsx') {
// this.$message.error('上传文件只能是 xls/xlsx 格式!');
// }
// if (!isLtSize) {
// this.$message.error('上传文件大小不能超过 1 MB!');
// }
// return isExcel && isLtSize;
},
// 上传文件改变时候触发的方法
handleFileChange(file) {
console.log(file);
},
// 上传文件
uploadFile(file) {
console.log(file);
},
// 处理上传成功之后操作
handleSuccess(resp, file, fileList) {
this.fileList = fileList;//!!!!注意:这个地方要直接复制,不能拿file然后push到this.fileList里面去,push进去页面会跳动
this.$api.saveOperationManual({ operationManual: resp.safeUrl }).then((res) => {
console.log(res);
if (res.code === 0) {
this.fileList[0].id = res.data.id;
const fileName = res.data.operationManual.split('/')[res.data.operationManual.split('/').length - 1];
this.fileList[0].fileName = fileName;
this.$notice.operateSuccess('上传成功');
} else {
this.$notice.operateError('上传失败', `${ res.message }`);
}
})
.catch((error) => {
this.$notice.operateError('上传失败', `${ error.data.message }`);
});
},
// 处理上传失败之后操作
handleError() {
this.$message.error('上传失败');
},
// /删除文件
handleRemove(file) {
this.$api.deleteOperationManual(file.id).then((res) => {
console.log(res);
if (res.code === 0) {
this.$notice.operateSuccess('删除成功');
this.showFile = false;
this.fileList = [];
console.log(this.fileList);
} else {
this.$notice.operateError('删除失败', `${ res.message }`);
}
})
.catch((error) => {
this.$notice.operateError('删除失败', `${ error.message }`);
});
},
// 下载文件
handlePreview(file) {
// 创建a标签
const link = document.createElement('a');
// download属性
link.setAttribute('download', file.name);
// href链接
link.setAttribute('href', file.operationManual);
// 自执行点击事件
link.click();
},
// 处理超出文件选择范围
handleExceed() {
this.$message.warning('当前限制上传 1 个文件');
},
// 查询文件
getList() {
this.$api.operationManual().then((res) => {
console.log(res);
if (res.code === 0 && res.data) {
const fileName = res.data.operationManual.split('/')[res.data.operationManual.split('/').length - 1];
this.fileList.push({ ...res.data,
name: fileName });
}
})
.catch((error) => {
this.$notice.operateError('获取失败', `${ error.message }`);
});
}
}
};
</script>
<style lang="scss" scoped>
@include b(scenic-oss) {
@include e(form) {
.uploads{
display: flex;
flex-direction: column;
}
}
}
</style>
el-upload上传及回显文件
于 2022-06-30 15:38:44 首次发布