update

src/assets/icon/fileIcon/delFile.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.97031 6.43595L4.9125 4.30469C4.75 4.13751 4.48437 4.13438 4.31718 4.29688C4.23593 4.37344 4.18906 4.47969 4.1875 4.59219C4.18437 4.70469 4.22812 4.81251 4.30468 4.8922L6.3625 7.02345L4.23125 9.08126C4.06406 9.24376 4.06093 9.50938 4.22343 9.67657C4.29999 9.75782 4.40625 9.8047 4.51875 9.80626C4.63125 9.80938 4.73906 9.76563 4.81875 9.68907L6.95 7.63126L9.00781 9.76251C9.17031 9.9297 9.43593 9.93282 9.60312 9.77032C9.68437 9.69376 9.73125 9.58751 9.73281 9.47501C9.73593 9.36251 9.69218 9.25469 9.61562 9.17501L7.55781 7.04376L9.68906 4.98595C9.85625 4.82345 9.85937 4.55782 9.69687 4.39063C9.62031 4.30938 9.51406 4.26251 9.40156 4.26095C9.28906 4.25782 9.18124 4.30157 9.10156 4.37813L6.97031 6.43595ZM2.44375 11.3938C0.0109327 8.87345 0.0812452 4.85938 2.6 2.42501C5.12031 -0.00780511 9.13437 0.0625074 11.5687 2.58126C14.0016 5.10157 13.9328 9.11563 11.4125 11.55C8.89218 13.9828 4.87812 13.9141 2.44375 11.3938Z" fill="#FFBBBB"/>
+</svg>

src/components/pages/classroomObservation/components/baseMessage.vue

@@ -217,9 +217,15 @@
 								:src="require('../../../../assets/icon/classroomObservation/videoFile.svg')"
 								fit="cover"
 							></el-image>
+							<div class="m_m_fi_videBtn">
+								<img v-if="!progressData.stop" :src="require('../../../../assets/icon/classroomObservation/stopIcon.png')" @click.stop="stopUploadVideo()">
+								<img v-if="progressData.stop" :src="require('../../../../assets/icon/classroomObservation/startIcon.png')"  @click.stop="startUploadVideo()">
+								<img :src="require('../../../../assets/icon/classroomObservation/delFile.svg')" @click.stop="delUploadVideo()">
+							</div>
 							<div class="m_m_fi_progress">
 									<div>{{ progressData.value }}%</div>
-									<span>上传中...</span>
+									<span v-if="!progressData.stop">上传中...</span>
+									<span v-else>已暂停</span>
 									<div class="m_m_fi_p_bar">
 										<div :style="{width:progressData.value+'%'}"></div>
 									</div>
@@ -274,19 +280,22 @@
 			</div>
 			
 		</div>
-		<previewVideoDialog ref="previewVideoDialogRef"/>
+		<previewVideoDialog ref="previewVideoDialogRef" />
+		<uploadFile v-if="progressData.uploadVideo" ref="uploadFileRef" @progressUpdate="videoProgressUpdate" @delUpload="videoDelUpload" @success="updateVideoSuccess" @startUpload="videoStartUpload"/>
 	</div>
 </template>
 
 <script>
 import previewVideoDialog from './previewVideoDialog.vue';
 import wordcloudEChart from './wordcloudEChart.vue'
+import uploadFile from './uploadFile.vue';
 import { v4 as uuidv4 } from "uuid";
 export default {
 	emits: ["saveData", "saveImage", "saveVideo","delImage","saveNephogram"],
 	components:{
 		previewVideoDialog,
-		wordcloudEChart
+		wordcloudEChart,
+		uploadFile
 	},
 	props: {
 		data: {
@@ -366,14 +375,19 @@ export default {
 				{ value: "其他", label: "其他" },
 			],
 			progressData:{
+				stop:false,
 				uploadVideo:false,
 				value:0,
+				status:"",
+				key:"",
+				uploadid:"",
 			}
 		};
 	},
 	watch:{
 		imageList(){
 			this.$forceUpdate();
+			this.progressData.uploadVideo = false;
 		}
 	},
 	methods: {
@@ -455,59 +469,128 @@ export default {
 			input.onchange = () => {
 				this.progressData.uploadVideo = true;
 				// this.uploadVideoLoading = true;
+				this.progressData.stop = false;
+				this.progressData.status = "";
+				this.progressData.value = 0;
 				let file = input.files[0];
-				var credentials = {
-					accessKeyId: "AKIATLPEDU37QV5CHLMH",
-					secretAccessKey: "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",
-				}; //秘钥形式的登录上传
-				window.AWS.config.update(credentials);
-				window.AWS.config.region = "cn-northwest-1"; //设置区域
+				this.$nextTick(()=>{
+					this.$refs.uploadFileRef.awsupload({
+					file:file,
+					folderName:this.tid
+				})
+				})
+			}
+			// 	this.progressData.uploadVideo = true;
+			// 	// this.uploadVideoLoading = true;
+			// 	this.progressData.stop = false;
+			// 	let file = input.files[0];
+			// 	var credentials = {
+			// 		accessKeyId: "AKIATLPEDU37QV5CHLMH",
+			// 		secretAccessKey: "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",
+			// 	}; //秘钥形式的登录上传
+			// 	window.AWS.config.update(credentials);
+			// 	window.AWS.config.region = "cn-northwest-1"; //设置区域
 
-				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
-				var _this = this;
+			// 	var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+			// 	var _this = this;
 
-				if (file) {
-					var params = {
-						Key:
-							file.name.split(".")[0] +
-							new Date().getTime() +
-							"." +
-							file.name.split(".")[file.name.split(".").length - 1],
-						ContentType: file.type,
-						Body: file,
-						"Access-Control-Allow-Credentials": "*",
-						ACL: "public-read",
-					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
-					var options = {
-						partSize: 2048 * 1024 * 1024,
-						queueSize: 2,
-						leavePartsOnError: true,
-					};
+			// 	if (file) {
+			// 		var params = {
+			// 			Key:
+			// 				file.name.split(".")[0] +
+			// 				new Date().getTime() +
+			// 				"." +
+			// 				file.name.split(".")[file.name.split(".").length - 1],
+			// 			ContentType: file.type,
+			// 			Body: file,
+			// 			"Access-Control-Allow-Credentials": "*",
+			// 			ACL: "public-read",
+			// 		}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+			// 		var options = {
+			// 			partSize: 2048 * 1024 * 1024,
+			// 			queueSize: 2,
+			// 			leavePartsOnError: true,
+			// 		};
 					
-					bucket
-						.upload(params, options)
-						.on("httpUploadProgress", function (evt) {
-							//这里可以写进度条
-							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
-							_this.progressData.value = parseInt((evt.loaded * 100) / evt.total)
-						})
-						.send(function (err, data) {
-							if (err) {
-								_this.$message.error("上传失败");
-							} else {
-								_this.$emit('saveVideo',{
-										name: data.key,
-										status: "success",
-										uid: "1",
-										url: data.Location,
-								})
-							}
-							_this.progressData.uploadVideo = false;
-							_this.progressData.value = 0;
-							// _this.uploadVideoLoading = false;
-						});
-				}
-			};
+			// 		bucket
+			// 			.upload(params, options)
+			// 			.on("httpUploadProgress", function (evt) {
+			// 				//这里可以写进度条
+			// 				// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+			// 				_this.progressData.value = parseInt((evt.loaded * 100) / evt.total)
+			// 			})
+			// 			.send(function (err, data) {
+			// 				if (err) {
+			// 					_this.$message.error("上传失败");
+			// 				} else {
+			// 					_this.$emit('saveVideo',{
+			// 							name: data.key,
+			// 							status: "success",
+			// 							uid: "1",
+			// 							url: data.Location,
+			// 					})
+			// 				}
+			// 				_this.progressData.uploadVideo = false;
+			// 				_this.progressData.value = 0;
+			// 				_this.progressData.stop = false;
+			// 				// _this.uploadVideoLoading = false;
+			// 			});
+			// 	}
+			// };
+		},
+		videoStartUpload({key,uploadid}){
+			this.progressData.uploadid = uploadid;
+			this.progressData.key = key;
+			this.progressData.status = "start"
+		},
+		updateVideoSuccess(res){
+			if(!res.data)return;
+			this.progressData.uploadVideo = false;
+			this.progressData.stop = false;
+			this.progressData.uploadid = "";
+			this.progressData.status = "";
+			this.progressData.value = 0;
+			let {data} = res;
+			this.$refs.uploadFileRef.file = null;
+			this.$emit('saveVideo',{
+					name: data.Key,
+					status: "success",
+					uid: "qgt",
+					url: data.Location,
+			})
+			console.log("👇")
+			console.log(data)
+			this.$message.success("上传成功")
+		},
+		videoProgressUpdate(data){
+			if(data.status=="processing"){
+				this.progressData.value = data.percent;
+				this.progressData.status = data.status;
+			}else if(data.status=="fail"){
+				this.progressData.value = data.percent;
+				this.progressData.status = data.status;
+				this.$message.error('上传发生错误，请点击继续上传')
+				this.$refs.uploadFileRef.stopUpload();
+			}else if(data.status=="success"){
+				this.progressData.value = data.percent;
+				this.progressData.status = data.status;
+				this.$refs.uploadFileRef.stopUpload();
+			}else if(data.status=="error"){
+				this.progressData.stop = true;
+				this.progressData.status = data.status;
+				this.$refs.uploadFileRef.stopUpload();
+				this.$message.error('上传发生错误，请重新上传')
+			}
+			console.log(this.progressData)
+		},
+		videoDelUpload(res){
+			this.progressData.uploadVideo = false;
+			this.progressData.uploadid = "";
+			this.progressData.key = "";
+			this.progressData.status = "";
+			this.progressData.stop = false;
+			this.progressData.value = 0;
+			this.$message.success("已删除视频");
 		},
 		//添加云图
 		addNephogram(){
@@ -674,6 +757,26 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
 			if(!this.tid)return this.$message.error("请选择课堂")
 			this.$emit("saveData");
 		},
+		// 停止上传视频
+		stopUploadVideo(){
+			this.$refs.uploadFileRef.stopUpload();
+			this.progressData.stop = true;
+			this.$message.success("已停止上传")
+		},
+		//开始上传视频
+		startUploadVideo(){
+			// this.$message.info("开始上传")
+			if(this.$refs.uploadFileRef.file && this.progressData.key){
+				this.$refs.uploadFileRef.awsupload({keyName:this.progressData.key})
+			}else{
+				this.addVideo();
+			}
+			this.progressData.stop = false;
+		},
+		delUploadVideo(){
+			this.$refs.uploadFileRef.stopUpload();
+			this.$refs.uploadFileRef.abortMultipartUpload(this.progressData.key,this.progressData.uploadid);
+		},
 	},
 	mounted() {
 		// this.showNephogram();
@@ -935,7 +1038,7 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
 	justify-content: center;
 	align-items: center;
 	/* 加载 */
-	cursor:wait !important;
+	/* cursor:wait !important; */
 	background-color: #00000099;
 }
 
@@ -1012,4 +1115,23 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
 .m-m-fi-nephogramItem:hover > span {
 	display: flex;
 }
+
+.m_m_fi_videBtn{
+	position: absolute;
+	right: 4px;
+	top: 4px;
+	width:auto;
+	height: 20px;
+	background-size: 100% 100%;
+	/* display: none; */
+	z-index: 99999;
+	display: flex;
+}
+
+.m_m_fi_videBtn>img{
+	width: 20px;
+	height: 20px;
+	margin-left:10px;
+	cursor: pointer;
+}
 </style>

src/components/pages/classroomObservation/components/uploadFile.vue

@@ -0,0 +1,319 @@
+<template>
+	<div class="uploadBox"></div>
+</template>
+
+<script>
+import "../../../../common/aws-sdk-2.235.1.min.js";
+export default {
+	emits: ["progressUpdate"],
+	data() {
+		return {
+			bucket: "", //aws上传接口
+			bucketname: "ccrb", //桶
+			uploadid: "",
+			partsize: 10 * 1024 * 1024, //10MB  分片
+			filestate: {
+				status: "", //有 error（直接报错） 和 fail（上传的时候报错） 和 success（上传成功） 和 processing（上传中）
+				percent: "", //（0-100的进度）
+			},
+			file: null,
+			flag:true,
+		};
+	},
+	watch: {
+		filestate: {
+			handler(newValue) {
+				this.$emit("progressUpdate", newValue);
+			},
+			immediate: true,
+			deep: true,
+		},
+	},
+	methods: {
+		//--------------------------分断上传保证稳定性
+		//初始化上传
+		// async init(){
+		// 	const credentials = {
+		// 	    accessKeyId: "AKIATLPEDU37QV5CHLMH",
+		// 	    secretAccessKey: "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",
+		// 	}; //秘钥形式的登录上传
+		// 	window.AWS.config.update(credentials);
+		// 	window.AWS.config.region = "cn-northwest-1"; //设置区域
+		// 	//桶的设置
+		// 	bucket = new window.AWS.S3({
+		// 	    params: {
+		// 	        Bucket: this.bucketname
+		// 	    }
+		// 	});
+		// 	return bucket;
+		// },
+		// 初始化上传入口
+		async initMultipartUpload(key, file) {
+			const params = {
+				Bucket: this.bucketname,
+				Key: key,
+				ContentType: file.type,
+				ACL: "public-read",
+			};
+			//创建一个续传通道
+			const data = await this.bucket.createMultipartUpload(params).promise();
+			return data.UploadId;
+		},
+		// 上传文件的某一部分
+		async uploadPart(file, keyname, uploadid, pn, start, end) {
+			//key可以设置为桶的相对路径，Body为文件， ACL最好要设置
+			if(!this.flag)return;
+			var params = {
+				Bucket: this.bucketname,
+				Key: keyname,
+				// ContentType: file.type,
+				PartNumber: pn,
+				UploadId: uploadid,
+				Body: file.slice(start, end),
+				// "Access-Control-Allow-Credentials": "*",
+				// ACL: "public-read",
+			};
+			const result = await this.bucket.uploadPart(params).promise();
+			return { ETag: result.ETag, PartNumber: pn };
+		},
+		//完成分块上传
+		async completeMultipartUpload(parts, keyname, uploadid) {
+			if(!this.flag)return;
+			const params = {
+				Bucket: this.bucketname,
+				Key: keyname,
+				MultipartUpload: { Parts: parts },
+				UploadId: uploadid,
+			};
+			return await this.bucket.completeMultipartUpload(params).promise();
+		},
+		async abortMultipartUpload(key, uploadid) {
+			const params = {
+				Bucket: this.bucketname,
+				Key: key,
+				UploadId: uploadid,
+			};
+			let data = await this.bucket.abortMultipartUpload(params).promise();
+			this.$emit("delUpload")
+			
+		},
+		//--------------------------------下面支持断点续传
+
+		//初始化亚马逊参数
+		async init() {
+			//秘钥形式的登录上传
+			const credentials = {
+				accessKeyId: "AKIATLPEDU37QV5CHLMH",
+				secretAccessKey: "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",
+				region: "cn-northwest-1",
+			};
+			window.AWS.config.update(credentials);
+			// window.AWS.config.region = "cn-northwest-1"; //设置区域
+			//桶的设置
+			this.bucket = new window.AWS.S3({
+				params: {
+					Bucket: this.bucketname,
+				},
+			});
+			return this.bucket;
+		},
+
+		//获取当前文件是否有已上传断点信息
+		async getawscheckpoint(key) {
+			let partsinfo;
+			try {
+				const result = await this.bucket
+					.listMultipartUploads({ Bucket: this.bucketname, Prefix: key })
+					.promise();
+				//获取具体分片信息
+				if (result.Uploads.length) {
+					this.uploadid = result.Uploads[result.Uploads.length - 1].UploadId;
+					partsinfo = await this.bucket
+						.listParts({
+							Bucket: this.bucketname,
+							Key: key,
+							UploadId: this.uploadid,
+						})
+						.promise();
+				}
+			} catch (err) {
+				console.log(err);
+			}
+			return { uploadid: this.uploadid, partsinfo };
+		},
+
+		//分段上传
+		async awsuploadpart(filestate, file, uploadid, parts, key) {
+			var partarr = []; //已完成的数组
+			//已完成的分片,转化成提交格式
+			const completeparts = parts.map((_) => {
+				partarr.push(_.PartNumber);
+				return { PartNumber: _.PartNumber, ETag: _.ETag };
+			});
+			// 分块上传文件
+			// parts = [];
+			let uploadpart;
+			let start = 0;
+			let end = 0;
+			let len = Math.ceil(file.size / this.partsize); //循环的长度
+			if (partarr.length) {
+				this.filestate.status = "processing";
+				this.filestate.percent = parseInt((completeparts.length * 100) / len);
+			}
+			//循环上传
+			for (let i = 0; i < len; i++) {
+				if(!this.flag)break;
+				start = i * this.partsize;
+				end = (i + 1) * this.partsize;
+				if (!partarr.includes(i+1)) {
+
+					uploadpart = await this.uploadPart(
+						file,
+						key,
+						uploadid,
+						i + 1,
+						start,
+						end
+					);
+					if (uploadpart.ETag != null) {
+						completeparts.push(uploadpart);
+						partarr.push(uploadpart.PartNumber);
+						this.filestate.status = "processing";
+						this.filestate.percent = parseInt(
+							(completeparts.length * 100) / len
+						);
+					} else {
+						this.filestate.status = "fail";
+						this.stopUpload();
+						return;
+					}
+				}
+			}
+			//提交上传成功信息
+			if(this.flag){
+					let data = await this.completeMultipartUpload(
+					completeparts,
+					key,
+					uploadid
+				);
+				this.filestate.status = "success";
+				return data;
+			}
+		},
+
+		//上传的接口
+		async awsupload({ file = this.file, keyName, folderName }) {
+			if (!file) return this.$message.error("请上传文件");
+			this.init(); //初始化桶
+			// const key = (folderid || uuidv4()) + "/" + file.name; //需要上传的文件名
+			let key = "";
+			if (keyName) {
+				key = keyName;
+			} else {
+				if (folderName) {
+					key = `${folderName}/${file.name}`;
+				} else {
+					key = `${file.name.split(".")[0] +
+							new Date().getTime() +
+							"." +
+							file.name.split(".")[file.name.split(".").length - 1]}`;
+				}
+			}
+			this.filestate = {
+				percent: 0,
+				status: "start",
+			};
+			this.filestate.percent = 0;
+			this.filestate.status = "start";
+			this.file = file;
+			//上传的参数
+			var params = {
+				Bucket: this.bucketname,
+				Key: key,
+			};
+			this.flag = true;
+			//设置桶上传文件
+			try {
+				//检查文件是否已上传
+				this.bucket.headObject(params, async (err, data) => {
+					// 没有上传成功，head方法会返回失败
+					if (err) {
+						//检查是否部分上传
+						const { uploadid, partsinfo } = await this.getawscheckpoint(
+							key,
+							this.bucket
+						);
+						//如果已经部分存在，那么直接在节点续传
+						if (uploadid) {
+							//断点续传
+							this.$emit("startUpload", { key, uploadid });
+							this.flag = true;
+							let data = await this.awsuploadpart(
+								this.filestate,
+								file,
+								uploadid,
+								partsinfo.Parts,
+								key
+							);
+							
+							if(this.flag || this.filestate.percent==100)return this.$emit("success", { data, key, uploadid });
+							// return {data,key,uploadid}
+						}
+						//不存在，上传新的
+						else {
+							const uploadid = await this.initMultipartUpload(key, file); //初始化文件上传
+							this.$emit("startUpload", { key, uploadid });
+							this.flag = true;
+							let data = await this.awsuploadpart(
+								this.filestate,
+								file,
+								uploadid,
+								[],
+								key
+							);
+							if(this.flag || this.filestate.percent==100)return this.$emit("success", { data, key, uploadid });
+							// return {data,key,uploadid}
+						}
+					}
+					//如果已经上传成功了，那么直接返回状态百分百
+					else if (data) {
+						//data存在，上传成功
+						this.filestate.percent = 100;
+						this.filestate.status = "success";
+						let url = `https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/${key}`
+						this.file = null;
+						if(this.flag)return this.$emit("success", { data:{
+							Key:key,
+							Location:url,
+							ETag:data.ETag,
+							size:data.ContentLength,
+							ServerSideEncryption:data.ServerSideEncryption,
+							Bucket:this.bucketname
+							} });
+						// return {data,key,uploadid}
+					}
+				});
+			} catch (err) {
+				this.filestate.status = "error";
+				this.stopUpload();
+				console.log(err);
+			}
+		},
+		// 停止上传
+		stopUpload(){
+			this.filestate.status = "stop";
+			this.flag = false;
+		}
+	},
+	mounted() {
+		this.bucket = "";
+		this.file = null;
+	},
+};
+</script>
+
+<style scoped>
+.uploadBox {
+	display: none;
+}
+</style>

src/components/pages/test/add/edit/check/uploadFile.vue

@@ -0,0 +1,327 @@
+<template>
+	<div class="uploadBox"></div>
+</template>
+
+<script>
+import "../../../../../../common/aws-sdk-2.235.1.min.js";
+export default {
+	props:{
+		index:{
+			type:String,
+			default:"0"
+		},
+	},
+	data() {
+		return {
+			bucket: "", //aws上传接口
+			bucketname: "ccrb", //桶
+			uploadid: "",
+			partsize: 10 * 1024 * 1024, //10MB  分片
+			filestate: {
+				status: "", //有 error（直接报错） 和 fail（上传的时候报错） 和 success（上传成功） 和 processing（上传中）
+				percent: "", //（0-100的进度）
+			},
+			file: null,
+			flag:true,
+		};
+	},
+	watch: {
+		filestate: {
+			handler(newValue) {
+				this.$emit("progressUpdate", {index:this.index,...newValue});
+			},
+			immediate: true,
+			deep: true,
+		},
+	},
+	methods: {
+		//--------------------------分断上传保证稳定性
+		//初始化上传
+		// async init(){
+		// 	const credentials = {
+		// 	    accessKeyId: "AKIATLPEDU37QV5CHLMH",
+		// 	    secretAccessKey: "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",
+		// 	}; //秘钥形式的登录上传
+		// 	window.AWS.config.update(credentials);
+		// 	window.AWS.config.region = "cn-northwest-1"; //设置区域
+		// 	//桶的设置
+		// 	bucket = new window.AWS.S3({
+		// 	    params: {
+		// 	        Bucket: this.bucketname
+		// 	    }
+		// 	});
+		// 	return bucket;
+		// },
+		// 初始化上传入口
+		async initMultipartUpload(key, file) {
+			const params = {
+				Bucket: this.bucketname,
+				Key: key,
+				ContentType: file.type,
+				ACL: "public-read",
+			};
+			//创建一个续传通道
+			const data = await this.bucket.createMultipartUpload(params).promise();
+			return data.UploadId;
+		},
+		// 上传文件的某一部分
+		async uploadPart(file, keyname, uploadid, pn, start, end) {
+			//key可以设置为桶的相对路径，Body为文件， ACL最好要设置
+			if(!this.flag)return;
+			var params = {
+				Bucket: this.bucketname,
+				Key: keyname,
+				// ContentType: file.type,
+				PartNumber: pn,
+				UploadId: uploadid,
+				Body: file.slice(start, end),
+				// "Access-Control-Allow-Credentials": "*",
+				// ACL: "public-read",
+			};
+			const result = await this.bucket.uploadPart(params).promise();
+			return { ETag: result.ETag, PartNumber: pn };
+		},
+		//完成分块上传
+		async completeMultipartUpload(parts, keyname, uploadid) {
+			if(!this.flag)return;
+			const params = {
+				Bucket: this.bucketname,
+				Key: keyname,
+				MultipartUpload: { Parts: parts },
+				UploadId: uploadid,
+			};
+			return await this.bucket.completeMultipartUpload(params).promise();
+		},
+		async abortMultipartUpload(key, uploadid) {
+			const params = {
+				Bucket: this.bucketname,
+				Key: key,
+				UploadId: uploadid,
+			};
+			let data = await this.bucket.abortMultipartUpload(params).promise();
+			this.$emit("delUpload",{index:this.index})
+			
+		},
+		//--------------------------------下面支持断点续传
+
+		//初始化亚马逊参数
+		async init() {
+			//秘钥形式的登录上传
+			const credentials = {
+				accessKeyId: "AKIATLPEDU37QV5CHLMH",
+				secretAccessKey: "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",
+				region: "cn-northwest-1",
+			};
+			window.AWS.config.update(credentials);
+			// window.AWS.config.region = "cn-northwest-1"; //设置区域
+			//桶的设置
+			this.bucket = new window.AWS.S3({
+				params: {
+					Bucket: this.bucketname,
+				},
+			});
+			return this.bucket;
+		},
+
+		//获取当前文件是否有已上传断点信息
+		async getawscheckpoint(key) {
+			let partsinfo;
+			try {
+				const result = await this.bucket
+					.listMultipartUploads({ Bucket: this.bucketname, Prefix: key })
+					.promise();
+				//获取具体分片信息
+				if (result.Uploads.length) {
+					this.uploadid = result.Uploads[result.Uploads.length - 1].UploadId;
+					partsinfo = await this.bucket
+						.listParts({
+							Bucket: this.bucketname,
+							Key: key,
+							UploadId: this.uploadid,
+						})
+						.promise();
+				}
+			} catch (err) {
+				console.log(err);
+			}
+			return { uploadid: this.uploadid, partsinfo };
+		},
+
+		//分段上传
+		async awsuploadpart(filestate, file, uploadid, parts, key) {
+			var partarr = []; //已完成的数组
+			//已完成的分片,转化成提交格式
+			const completeparts = parts.map((_) => {
+				partarr.push(_.PartNumber);
+				return { PartNumber: _.PartNumber, ETag: _.ETag };
+			});
+			// 分块上传文件
+			// parts = [];
+			let uploadpart;
+			let start = 0;
+			let end = 0;
+			let len = Math.ceil(file.size / this.partsize); //循环的长度
+			if (partarr.length) {
+				this.filestate.status = "processing";
+				this.filestate.percent = parseInt((completeparts.length * 100) / len);
+			}
+			//循环上传
+			for (let i = 0; i < len; i++) {
+				if(!this.flag)break;
+				start = i * this.partsize;
+				end = (i + 1) * this.partsize;
+				if (!partarr.includes(i+1)) {
+
+					uploadpart = await this.uploadPart(
+						file,
+						key,
+						uploadid,
+						i + 1,
+						start,
+						end
+					);
+					if (uploadpart.ETag != null) {
+						completeparts.push(uploadpart);
+						partarr.push(uploadpart.PartNumber);
+						this.filestate.status = "processing";
+						this.filestate.percent = parseInt(
+							(completeparts.length * 100) / len
+						);
+					} else {
+						this.filestate.status = "fail";
+						this.stopUpload();
+						return;
+					}
+				}
+			}
+			//提交上传成功信息
+			if(this.flag){
+					let data = await this.completeMultipartUpload(
+					completeparts,
+					key,
+					uploadid
+				);
+				this.filestate.status = "success";
+				return data;
+			}
+		},
+
+		//上传的接口
+		async awsupload({ file = this.file, keyName, folderName }) {
+			if (!file) return this.$message.error("请上传文件");
+			this.init(); //初始化桶
+			// const key = (folderid || uuidv4()) + "/" + file.name; //需要上传的文件名
+			let key = "";
+			if (keyName) {
+				key = keyName;
+			} else {
+				if (folderName) {
+					key = `${folderName}/${file.name}`;
+				} else {
+					key = `default/${file.name.split(".")[0] +
+							new Date().getTime() +
+							"." +
+							file.name.split(".")[file.name.split(".").length - 1]}`;
+				}
+			}
+			this.filestate = {
+				percent: 0,
+				status: "start",
+			};
+			this.filestate.percent = 0;
+			this.filestate.status = "start";
+			this.file = file;
+			//上传的参数
+			var params = {
+				Bucket: this.bucketname,
+				Key: key,
+			};
+			this.flag = true;
+			//设置桶上传文件
+			try {
+				//检查文件是否已上传
+				this.bucket.headObject(params, async (err, data) => {
+					// 没有上传成功，head方法会返回失败
+					if (err) {
+						//检查是否部分上传
+						const { uploadid, partsinfo } = await this.getawscheckpoint(
+							key,
+							this.bucket
+						);
+						//如果已经部分存在，那么直接在节点续传
+						if (uploadid) {
+							//断点续传
+							this.$emit("startUpload", { index:this.index,key, uploadid });
+							this.filestate.key = key;
+							this.filestate.uploadid = uploadid;
+							this.flag = true;
+							let data = await this.awsuploadpart(
+								this.filestate,
+								file,
+								uploadid,
+								partsinfo.Parts,
+								key
+							);
+							if(this.flag || this.filestate.percent==100)return this.$emit("success", {index:this.index, data, key, uploadid });
+							// return {data,key,uploadid}
+						}
+						//不存在，上传新的
+						else {
+							const uploadid = await this.initMultipartUpload(key, file); //初始化文件上传
+							this.$emit("startUpload", { index:this.index,key, uploadid });
+							this.filestate.key = key;
+							this.filestate.uploadid = uploadid;
+							this.flag = true;
+							let data = await this.awsuploadpart(
+								this.filestate,
+								file,
+								uploadid,
+								[],
+								key
+							);
+							if(this.flag || this.filestate.percent==100)return this.$emit("success", {index:this.index, data, key, uploadid });
+							// return {data,key,uploadid}
+						}
+					}
+					//如果已经上传成功了，那么直接返回状态百分百
+					else if (data) {
+						//data存在，上传成功
+						this.filestate.percent = 100;
+						this.filestate.status = "success";
+						let url = `https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/${key}`
+						this.file = null;
+						if(this.flag)return this.$emit("success", { index:this.index,data:{
+							Key:key,
+							Location:url,
+							ETag:data.ETag,
+							size:data.ContentLength,
+							ServerSideEncryption:data.ServerSideEncryption,
+							Bucket:this.bucketname
+							} });
+						// return {data,key,uploadid}
+					}
+				});
+			} catch (err) {
+				this.filestate.status = "error";
+				this.stopUpload();
+				console.log(err);
+			}
+		},
+		// 停止上传
+		stopUpload(){
+			this.filestate.status = "stop";
+			this.flag = false;
+		}
+	},
+	mounted() {
+		this.bucket = "";
+		this.file = null;
+	},
+};
+</script>
+
+<style scoped>
+.uploadBox {
+	display: none;
+}
+</style>

src/components/pages/testStudent/view/component/uploadFile.vue

@@ -0,0 +1,327 @@
+<template>
+	<div class="uploadBox"></div>
+</template>
+
+<script>
+import "../../../../../common/aws-sdk-2.235.1.min.js";
+export default {
+	props:{
+		index:{
+			type:String,
+			default:"0"
+		},
+	},
+	data() {
+		return {
+			bucket: "", //aws上传接口
+			bucketname: "ccrb", //桶
+			uploadid: "",
+			partsize: 10 * 1024 * 1024, //10MB  分片
+			filestate: {
+				status: "", //有 error（直接报错） 和 fail（上传的时候报错） 和 success（上传成功） 和 processing（上传中）
+				percent: "", //（0-100的进度）
+			},
+			file: null,
+			flag:true,
+		};
+	},
+	watch: {
+		filestate: {
+			handler(newValue) {
+				this.$emit("progressUpdate", {index:this.index,...newValue});
+			},
+			immediate: true,
+			deep: true,
+		},
+	},
+	methods: {
+		//--------------------------分断上传保证稳定性
+		//初始化上传
+		// async init(){
+		// 	const credentials = {
+		// 	    accessKeyId: "AKIATLPEDU37QV5CHLMH",
+		// 	    secretAccessKey: "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",
+		// 	}; //秘钥形式的登录上传
+		// 	window.AWS.config.update(credentials);
+		// 	window.AWS.config.region = "cn-northwest-1"; //设置区域
+		// 	//桶的设置
+		// 	bucket = new window.AWS.S3({
+		// 	    params: {
+		// 	        Bucket: this.bucketname
+		// 	    }
+		// 	});
+		// 	return bucket;
+		// },
+		// 初始化上传入口
+		async initMultipartUpload(key, file) {
+			const params = {
+				Bucket: this.bucketname,
+				Key: key,
+				ContentType: file.type,
+				ACL: "public-read",
+			};
+			//创建一个续传通道
+			const data = await this.bucket.createMultipartUpload(params).promise();
+			return data.UploadId;
+		},
+		// 上传文件的某一部分
+		async uploadPart(file, keyname, uploadid, pn, start, end) {
+			//key可以设置为桶的相对路径，Body为文件， ACL最好要设置
+			if(!this.flag)return;
+			var params = {
+				Bucket: this.bucketname,
+				Key: keyname,
+				// ContentType: file.type,
+				PartNumber: pn,
+				UploadId: uploadid,
+				Body: file.slice(start, end),
+				// "Access-Control-Allow-Credentials": "*",
+				// ACL: "public-read",
+			};
+			const result = await this.bucket.uploadPart(params).promise();
+			return { ETag: result.ETag, PartNumber: pn };
+		},
+		//完成分块上传
+		async completeMultipartUpload(parts, keyname, uploadid) {
+			if(!this.flag)return;
+			const params = {
+				Bucket: this.bucketname,
+				Key: keyname,
+				MultipartUpload: { Parts: parts },
+				UploadId: uploadid,
+			};
+			return await this.bucket.completeMultipartUpload(params).promise();
+		},
+		async abortMultipartUpload(key, uploadid) {
+			const params = {
+				Bucket: this.bucketname,
+				Key: key,
+				UploadId: uploadid,
+			};
+			let data = await this.bucket.abortMultipartUpload(params).promise();
+			this.$emit("delUpload",{index:this.index})
+			
+		},
+		//--------------------------------下面支持断点续传
+
+		//初始化亚马逊参数
+		async init() {
+			//秘钥形式的登录上传
+			const credentials = {
+				accessKeyId: "AKIATLPEDU37QV5CHLMH",
+				secretAccessKey: "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",
+				region: "cn-northwest-1",
+			};
+			window.AWS.config.update(credentials);
+			// window.AWS.config.region = "cn-northwest-1"; //设置区域
+			//桶的设置
+			this.bucket = new window.AWS.S3({
+				params: {
+					Bucket: this.bucketname,
+				},
+			});
+			return this.bucket;
+		},
+
+		//获取当前文件是否有已上传断点信息
+		async getawscheckpoint(key) {
+			let partsinfo;
+			try {
+				const result = await this.bucket
+					.listMultipartUploads({ Bucket: this.bucketname, Prefix: key })
+					.promise();
+				//获取具体分片信息
+				if (result.Uploads.length) {
+					this.uploadid = result.Uploads[result.Uploads.length - 1].UploadId;
+					partsinfo = await this.bucket
+						.listParts({
+							Bucket: this.bucketname,
+							Key: key,
+							UploadId: this.uploadid,
+						})
+						.promise();
+				}
+			} catch (err) {
+				console.log(err);
+			}
+			return { uploadid: this.uploadid, partsinfo };
+		},
+
+		//分段上传
+		async awsuploadpart(filestate, file, uploadid, parts, key) {
+			var partarr = []; //已完成的数组
+			//已完成的分片,转化成提交格式
+			const completeparts = parts.map((_) => {
+				partarr.push(_.PartNumber);
+				return { PartNumber: _.PartNumber, ETag: _.ETag };
+			});
+			// 分块上传文件
+			// parts = [];
+			let uploadpart;
+			let start = 0;
+			let end = 0;
+			let len = Math.ceil(file.size / this.partsize); //循环的长度
+			if (partarr.length) {
+				this.filestate.status = "processing";
+				this.filestate.percent = parseInt((completeparts.length * 100) / len);
+			}
+			//循环上传
+			for (let i = 0; i < len; i++) {
+				if(!this.flag)break;
+				start = i * this.partsize;
+				end = (i + 1) * this.partsize;
+				if (!partarr.includes(i+1)) {
+
+					uploadpart = await this.uploadPart(
+						file,
+						key,
+						uploadid,
+						i + 1,
+						start,
+						end
+					);
+					if (uploadpart.ETag != null) {
+						completeparts.push(uploadpart);
+						partarr.push(uploadpart.PartNumber);
+						this.filestate.status = "processing";
+						this.filestate.percent = parseInt(
+							(completeparts.length * 100) / len
+						);
+					} else {
+						this.filestate.status = "fail";
+						this.stopUpload();
+						return;
+					}
+				}
+			}
+			//提交上传成功信息
+			if(this.flag){
+					let data = await this.completeMultipartUpload(
+					completeparts,
+					key,
+					uploadid
+				);
+				this.filestate.status = "success";
+				return data;
+			}
+		},
+
+		//上传的接口
+		async awsupload({ file = this.file, keyName, folderName }) {
+			if (!file) return this.$message.error("请上传文件");
+			this.init(); //初始化桶
+			// const key = (folderid || uuidv4()) + "/" + file.name; //需要上传的文件名
+			let key = "";
+			if (keyName) {
+				key = keyName;
+			} else {
+				if (folderName) {
+					key = `${folderName}/${file.name}`;
+				} else {
+					key = `default/${file.name.split(".")[0] +
+							new Date().getTime() +
+							"." +
+							file.name.split(".")[file.name.split(".").length - 1]}`;
+				}
+			}
+			this.filestate = {
+				percent: 0,
+				status: "start",
+			};
+			this.filestate.percent = 0;
+			this.filestate.status = "start";
+			this.file = file;
+			//上传的参数
+			var params = {
+				Bucket: this.bucketname,
+				Key: key,
+			};
+			this.flag = true;
+			//设置桶上传文件
+			try {
+				//检查文件是否已上传
+				this.bucket.headObject(params, async (err, data) => {
+					// 没有上传成功，head方法会返回失败
+					if (err) {
+						//检查是否部分上传
+						const { uploadid, partsinfo } = await this.getawscheckpoint(
+							key,
+							this.bucket
+						);
+						//如果已经部分存在，那么直接在节点续传
+						if (uploadid) {
+							//断点续传
+							this.$emit("startUpload", { index:this.index,key, uploadid });
+							this.filestate.key = key;
+							this.filestate.uploadid = uploadid;
+							this.flag = true;
+							let data = await this.awsuploadpart(
+								this.filestate,
+								file,
+								uploadid,
+								partsinfo.Parts,
+								key
+							);
+							if(this.flag || this.filestate.percent==100)return this.$emit("success", {index:this.index, data, key, uploadid });
+							// return {data,key,uploadid}
+						}
+						//不存在，上传新的
+						else {
+							const uploadid = await this.initMultipartUpload(key, file); //初始化文件上传
+							this.$emit("startUpload", { index:this.index,key, uploadid });
+							this.filestate.key = key;
+							this.filestate.uploadid = uploadid;
+							this.flag = true;
+							let data = await this.awsuploadpart(
+								this.filestate,
+								file,
+								uploadid,
+								[],
+								key
+							);
+							if(this.flag || this.filestate.percent==100)return this.$emit("success", {index:this.index, data, key, uploadid });
+							// return {data,key,uploadid}
+						}
+					}
+					//如果已经上传成功了，那么直接返回状态百分百
+					else if (data) {
+						//data存在，上传成功
+						this.filestate.percent = 100;
+						this.filestate.status = "success";
+						let url = `https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/${key}`
+						this.file = null;
+						if(this.flag)return this.$emit("success", { index:this.index,data:{
+							Key:key,
+							Location:url,
+							ETag:data.ETag,
+							size:data.ContentLength,
+							ServerSideEncryption:data.ServerSideEncryption,
+							Bucket:this.bucketname
+							} });
+						// return {data,key,uploadid}
+					}
+				});
+			} catch (err) {
+				this.filestate.status = "error";
+				this.stopUpload();
+				console.log(err);
+			}
+		},
+		// 停止上传
+		stopUpload(){
+			this.filestate.status = "stop";
+			this.flag = false;
+		}
+	},
+	mounted() {
+		this.bucket = "";
+		this.file = null;
+	},
+};
+</script>
+
+<style scoped>
+.uploadBox {
+	display: none;
+}
+</style>