<template>
	<div class="content">
		<el-upload action :http-request="Upload" :before-upload="beforeAvatarUpload" :on-preview="handlePreview"
		 :before-remove="beforeRemove" :on-remove="handleRemove" :on-success="handleSuccess" :on-exceed="handleExceed" drag
		 :limit="limit" :file-list="fileList">
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">
				将文件拖到此处，或
				<em>点击上传</em>
			</div>
			<div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
		</el-upload>

		<el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
	</div>
</template>

<script>
import {
  client1,
  getFileNameUUID
} from '@api/ali-oss' //前面的ali-js文件内的两个封装函数

	export default {
		name: "Upload",
		props: {
			limit: {
				type: Number,
				default: 5
			}
		},
		data() {
			return {
				fileList: [], //文件列
				showProgress: false, //进度条的显示
				dataObj: {
					region: 'oss-cn-beijing',
					//云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
					accessKeyId: 'LTAI4GG1zbSAQrjAvWL8bJKX',
					accessKeySecret: '06yXwRMA5ppeTb0hI29lG3jQqwr4A8',
					bucket: 'hsz1997', //存签名信息
				},
				progress: 0 //进度条数据
			}
		},
		methods: {
			// 文件超出个数限制时的钩子
			handleExceed(files, fileList) {
				this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
			},
			// 点击文件列表中已上传的文件时的钩子
			handlePreview(file) {},
			// 删除文件之前的钩子
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
			// 文件列表移除文件时的钩子
			handleRemove(file, fileList) {
				this.progress=0
			},
			// 文件上传成功时的钩子
			handleSuccess(response, file, fileList) {
				this.fileList = fileList;
				this.$emit('onsuccess',  fileList)
			},
			//文件上传前的校验
			beforeAvatarUpload(file) {
				const isLt100M =
					file.size / 1024 / 1024 > 10 && file.size / 1024 / 1024 < 1024;
				const isLt30 = file.name.length < 30;
				if (!isLt30) {
					this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
					return false;
				}
				// 请求后台接口拿配置参数
			},
			// http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现 
			Upload(file) {
				const that = this;
				async function multipartUpload() {
					let temporary = file.file.name.lastIndexOf(".");
					let fileNameLength = file.file.name.length;
					let fileFormat = file.file.name.substring(
						temporary + 1,
						fileNameLength
					);
					let fileName = getFileNameUUID() + "." + fileFormat;
					client1(that.dataObj).multipartUpload(`videoTest/${fileName}`, file.file, {
							progress: function(p) {
								//p进度条的值
								console.log(p);
								that.showProgress = true;
								that.progress = Math.floor(p * 100);
							}
						}).then(result => {
							//上传成功返回值，可针对项目需求写其他逻辑
							console.log(result);
						})
						.catch(err => {
							console.log("err:", err);
						});
				}
				multipartUpload();
			}
		}
	};
</script>

<style>
</style>
