TEAMModelOS/TEAMModelOS/ClientApp/src/common/AbilityUpload.vue

<template>
	<div class="base-upload-container">
		<Upload :multiple="!singleUpload" type="drag" action="" :before-upload="onBeforeUpload"
			:show-upload-list="false">
			<div style="padding: 40px 0">
				<Icon type="ios-cloud-upload" size="100" style="color: #a3a3a3;margin: 40px 0;"></Icon>
				<p style="color: #a3a3a3">{{ $t('ability.uploadTip') }}</p>
				<p style="color: #a3a3a3" v-if="acceptTypes.length">（{{ $t('knowledge.import.tip2') }}：
					{{ acceptTypes.join(' / ') }} ）</p>
			</div>
		</Upload>
		<div class="file-list-box">
			<div class="file-item" v-for="(item,index) in fileArr" :key="index">
				<p>
					<span>{{ item.name }}</span>
					<span class="tool-remove" v-if="isShowTool">
						<Icon type="md-close" @click="onRemoveFile(index)" />
					</span>
				</p>
				<Progress :percent="progressArr[index]" :stroke-width="12" />
			</div>
		</div>
		<Button type="success" @click="onConfirmUpload" style="width: 100%;height: 40px;" :loading="isLoading"
			class="modal-btn" :disabled="!fileArr.length"
			v-if="mode === 'modal'">{{ $t('ability.confirmUpload') }}</Button>
	</div>
</template>

<script>
	import excel from '@/utils/excel.js'
	import FileSaver from "file-saver";
	import BlobTool from '@/utils/blobTool.js'
	export default {
		props: {
			auth: {
				type: Object,
				default: () => {
					return {
						sas: '',
						url: '',
						name: ''
					}
				}
			},
			scope: {
				type: String,
				default: 'school'
			},
			prefix: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'modal'
			},
			maxSize: {
				type: Number,
				default: -1
			},
			acceptTypes: {
				type: Array,
				default: () => []
			},
			// 简易上传，只返回选择的fileArr,不做操作处理
			simpleUpload: {
				type: Boolean,
				default: false
			},
			// 只能上传单个
			singleUpload: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				isLoading: false,
				isShowTool: true,
				containerClient: null,
				fileArr: [],
				progressArr: []
			}
		},
		created() {
			console.log(this.acceptTypes);
		},
		methods: {


			onRemoveFile(index) {
				this.fileArr.splice(index, 1)
			},

			/* 转换size */
			getSizeByBytes(bytes) {
				return bytes / 1024 < 1024 ? (bytes / 1024).toFixed(1) + 'KB' : bytes / 1024 / 1024 < 1024 ? (bytes /
					1024 / 1024).toFixed(1) + 'M' : (bytes / 1024 / 1024 / 1024).toFixed(1) + 'G'
			},

			async onBeforeUpload(file) {
				console.log(this.$GLOBAL.NotSupport);
				console.log(this.acceptTypes);
				console.log(file);
				console.log(file.type);

				let nameType = file.name.split('.')[file.name.split('.').length - 1]
				if (this.maxSize > 0 && file.size > this.maxSize) {
					this.$Message.warning(this.$t('ability.sizeTip') + this.getSizeByBytes(this.maxSize) + '！');
					return false
				}
				if (this.acceptTypes.length && !this.acceptTypes.includes(file.type.split('/')[file.type.split('/')
						.length - 1].toLowerCase()) && !this.acceptTypes.includes(nameType.toLowerCase())) {
					this.$Message.warning(this.$t('ability.typeTip') + this.acceptTypes.join(','));
					return false
				} else if (this.$GLOBAL.NotSupport.includes(nameType.toUpperCase()) && !this.acceptTypes.length) {
					this.$Message.warning(this.$t('learnActivity.notSupportType')); // 黑名单文件格式不能上传
					return false
				}


				if (this.mode === 'import') {
					let excelResult = []
					this.readExcel(file, data => {
						if (data.results.length) {
							console.log(data);
							data.results.forEach(item => {
								excelResult.push({
									question: item.Question || '',
									answer: item.Answer ? (item.Type === 'multiple' ? item
										.Answer
										.split(',') : [item.Answer]) : [],
									type: item.Type,
									options: this.getItemOptions(item)
								})
							})
							console.log(excelResult);
							this.fileArr = []
							this.progressArr = []
							this.$emit('uploadFinish', excelResult)
							this.isLoading = false
						}
					})
					return false
				}
				file.progress = 0
				this.fileArr.push(file)
				this.progressArr.push(0)
				return false
			},

			/* 解析excel表格 */
			readExcel(file, callback) {
				var reader = new FileReader();
				reader.onload = function(e) {
					var data = e.target.result;
					var workbook = excel.read(data, 'binary');
					if (callback) callback(workbook);
				};
				reader.readAsBinaryString(file);
			},

			/* 获取表格解析试题的选项 */
			getItemOptions(item) {
				let options = []
				let optionIndex = 0
				if (item.Type === 'judge') {
					return [{
						code: 'A',
						value: this.$t('ability.true')
					}, {
						code: 'B',
						value: this.$t('ability.false')
					}]
				} else {
					for (let key in item) {
						if (key.includes('Option')) {
							options.push({
								code: String.fromCharCode(64 + parseInt(optionIndex + 1)),
								value: item[key]
							})
							optionIndex++
						}
					}
					return options
				}
			},
			/* 确认上传 */
			async onConfirmUpload() {
				if (this.simpleUpload) {
					this.$emit('uploadFinish', this.fileArr)
					return
				}
				this.isShowTool = false
				this.isLoading = true
				let result = []
				let containerClient = this.containerClient
				let list = this.fileArr
				let that = this
				let path = this.prefix === '' ? `yxpt/${this.curStandard}/jyzx` :
					(this.mode === 'video' ? `yxpt/${this.curStandard}/jyzx/${this.prefix}/video` : `yxpt/${this.curStandard}/jyzx/${this.prefix}`)
				for (let i = 0; i < list.length; i++) {
					let file = list[i]
					try {
						let blobFile = await containerClient.upload(file, { path:path,checkSize:false }, {
							onProgress: function(e) {
								that.$set(that.progressArr, i, parseInt(e.loadedBytes * 100 / file.size))
							}
						});
						// 如果上传的是视频文件 则需要获取视频的时长信息和MD5信息
						if (blobFile.type === 'video') {
							await this.uploadVideoPoster(blobFile, path, containerClient)
							blobFile.duration = await this.$tools.getVideoDuration(file)
						}
						let fileMD5 = await this.$tools.getFileMD5(file)
						blobFile.hash = this.$tools.convertFileMD5ToString(fileMD5)
						console.log('getFileMD5 > convertFileMD5ToString >', blobFile)
						result.push(blobFile)
					} catch (e) {
						this.$Message.error(e.spaceError ? e.spaceError : 'upload Fail')
						return
					}
				}
				this.fileArr = []
				this.progressArr = []
				this.$emit('uploadFinish', result)
				this.isLoading = false
			},
			/* 上传视频封面 */
			uploadVideoPoster(blobJson, path, containerClient) {
				return new Promise(async (r, j) => {
					try {
						let fileFullUrl = await this.$tools.getFileSas(blobJson.url)
						let n = blobJson.name.substring(0, blobJson.name.lastIndexOf('.'))
						let dataUrl = await this.$jsFn.createVideoPoster(fileFullUrl.url,blobJson.name)
						let f = this.$jsFn.dataURLtoFile(dataUrl, n + '.png')
						let blobFile = await containerClient.upload(f, { path:path,checkSize:false });
						r(blobFile)
					} catch (e) {
						this.$Message.error('当前视频可能无法播放，请检查视频编码格式')
						r(e)
					}
				})

			}
		},
		mounted() {
			if (this.auth.sas) {
				let n = this.auth
				this.containerClient = new BlobTool(n.url, n.name, n.sas, this.scope)
			}
		},
		computed: {
			curStandard() {
				return sessionStorage.getItem('standard') || this.$store.state.user.schoolProfile.school_base.standard
			},
			isAreaMgmt() {
				return this.$route.name === 'areaAbilityMgmt'
			}
		},
		watch: {
			auth: {
				handler(n, o) {
					this.containerClient = new BlobTool(n.url, n.name, n.sas, this.scope)
				}
			}
		}
	}
</script>

<style lang="less">
	.base-upload-container {
		.file-list-box {
			margin: 20px 5px;
			width: 100%;
			max-height: 200px;
			overflow: auto;

			.file-item {
				margin: 10px 0;

				.tool-remove {
					color: #b3b3b3;
					margin-left: 15px;
					font-size: 14px;
					cursor: pointer;
				}
			}

			.ivu-progress {
				margin-top: 10px;
			}

			.ivu-progress-inner {
				background-color: #e1e1e1;
			}

			.ivu-progress-text-inner {
				color: #969696;
			}

			&::-webkit-scrollbar-thumb {
				background: #dadada !important;
			}
		}
	}
</style>