front-end/src/views/modules/monitoring/library-upload.vue

<template>
	<div class="libraryUpload">
		<el-dialog :visible.sync="visible" center :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<!-- 上传 -->
			<template v-if="uploadState">
				<span slot="title"><i class="font-sexteen">上传</i></span>
				<el-upload class="text-center" drag multiple name="processFile" :show-file-list="true" file-list="text"
				 :auto-upload="true" :action="url" :file-list="fileList" :before-upload="beforeUploadHandle" :on-success="successHandle"
				 :on-progress="progressHandle" :on-error="errorHandle" :limit="10" :on-exceed="handleExceed" :headers="headers">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text" v-html="$t('upload.text')"></div>
					<div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { 'format': 'jpeg、jpg、png' }) }}</div>
				</el-upload>
				<div style="display: flex;flex-direction: column; align-items: center;color: red;margin-top: 5px;font-size: 18px;line-height: 30px;">
					<span>文件名格式必须为：姓名</span>
					<span>一次最多上传十张</span>
				</div>
			</template>
			<!-- 导图状况 喀什不用-->
			<template v-else>
				<span slot="title"><i class="font-sexteen">导图状况</i></span>
				<el-table :data="uploadList" style="width: 100%">
					<el-table-column prop="type" label="类型" width="180">
					</el-table-column>
					<el-table-column prop="name" label="名字" width="180">
					</el-table-column>
					<el-table-column prop="percent" label="进度">
						<template slot-scope="scope">
							<el-progress :percentage="parseFloat(scope.row.percent.toFixed(2))"></el-progress>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="上传状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 'fail'" class="el-icon-refresh cursor-class" style="color:red" @click="refreshUpload()"></span>
							<span v-else style="color:green">{{scope.row.status}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="startTime" label="开始时间">
						<template slot-scope="scope">
							{{scope.row.startTime}}
						</template>
					</el-table-column>
					<el-table-column prop="endTime" label="结束时间">
						<template slot-scope="scope">
							{{scope.row.endTime}}
						</template>
					</el-table-column>
				</el-table>
			</template>
			<span slot="footer">
				<el-button @click="visible = false">取消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	export default {
		data() {
			return {
				// 取消关闭按钮
				visible: false,
				url: '',
				fileList: [],
				uploadList: [],
				uploadState: true,
				fromWhere: "",
				headers: {
					'token': Cookies.get('token')
				}
			}
		},
		methods: {
			/**
			 * @param {String} param1 来自上传("upload")/导图状况()	
			 * @param {String} param2 来自library/libraryView
			 * @param {Object} param3 库ID
			 */
			init(param1, param2, param3) {
				this.visible = true
				this.fromWhere = param2
				this.uploadState = (param1 === "upload") ? true : false
				this.url = `${window.SITE_CONFIG['apiURL']}/Resources/addFile/${param3}`
				// this.url = `${window.SITE_CONFIG['apiURL']}/Resources/addpngFile/${param3}`
				this.fileList = []
			},
			// 时间格式转换
			getNowTime() {
				var date = new Date();
				this.year = date.getFullYear();
				this.month = date.getMonth() + 1;
				this.date = date.getDate();
				this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				this.milliSeconds = date.getMilliseconds();
				var currentTime = this.year + '-' + this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute + ':' + this
					.second + '.' + this.milliSeconds;
				return currentTime;
			},
			// 上传之前
			beforeUploadHandle(file) {
				if (!/.+\.jpeg$/.test(file.name) && !/.+\.jpg$/.test(file.name) && !/.+\.png$/.test(file.name)) {
					this.$message.error(this.$t('upload.tip', {
						'format': 'jpeg、jpg、png'
					}))
					return false
				}
				this.uploadList.push({
					"name": file.name,
					"uid": file.uid,
					"percent": 0,
					"startTime": this.getNowTime(),
					"endTime": "",
					"status": ""
				})
			},
			// 上传限制
			handleExceed(e) {
				this.$message.warning(`上传了${e.length}张,限10张`)
			},
			// 上传中--喀什版本不用
			progressHandle(event, file, fileList) {
				console.log(event, file, fileList)
				this.uploadList.forEach(item => {
					if (item.uid === file.uid) {
						item.percent = event.percent
						item.status = file.status
						item.endTime = event.percent === 100 ? this.getNowTime() : ""
					}
				})
			},
			// 上传成功
			successHandle(res, file, fileList) {
				if (res.code == 0) {
					this.$message({
						message: this.$t('prompt.success'),
						type: 'success',
						duration: 500,
						onClose: () => {
							this.visible = false
							// fromWhere 暂时不用，不加参数也能满足跳转不同主页面
							this.$emit('refreshUploadClick', this.fromWhere)
						}
					})
				} else if (res.code == 80005) {
					this.$message.warning(res.message)
				} else if (res.code == 80006) {
					this.$message.warning(res.message)
				} else if (res.code == 80008) {
					this.$message.warning(res.message)
				} else {
					console.log(res)
				}
			},
			// 上传失败--喀什版本不用
			errorHandle(err, file, fileList) {
				this.uploadList.forEach(item => {
					if (item.uid === file.uid) {
						item.status = "fail"
					}
				})
			},
			// 刷新从新上传--喀什版本不用
			refreshUpload() {
				this.uploadState = true
			}
		}
	}
</script>
<style scoped>
	i {
		font-style: normal;
		font-family: "Noto Sans SC";
		color: #333
	}

	.font-fourteen {
		font-size: 14px;
		font-weight: 400;
	}

	.font-eighteen {
		font-size: 18px;
		font-weight: bold;
	}

	.font-sexteen {
		font-size: 16px;
		font-weight: bold;
	}

	.cursor-class {
		cursor: pointer;
	}
</style>