|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="pb_content" style="overflow: auto;">
|
|
|
+ <div class="pb_content" style="overflow: auto">
|
|
|
<div class="pb_head top">
|
|
|
<span>素材库</span>
|
|
|
<div v-if="choose == 0" @click="addImg($event)">
|
|
|
@@ -142,6 +142,19 @@
|
|
|
style="width: 100%; height: 100%"
|
|
|
></video-player>
|
|
|
</el-dialog>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox">
|
|
|
+ <img :src="require('../../assets/loading.gif')" />上传中，请稍后
|
|
|
+ </div>
|
|
|
+ <el-progress
|
|
|
+ :text-inside="true"
|
|
|
+ :stroke-width="20"
|
|
|
+ :percentage="progress"
|
|
|
+ style="width: 80%"
|
|
|
+ ></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -189,6 +202,8 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
playerO: {},
|
|
|
+ proVisible: false,
|
|
|
+ progress: 0,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -218,14 +233,15 @@ export default {
|
|
|
|
|
|
var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
var _this = this;
|
|
|
-
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
if (file) {
|
|
|
var params = {
|
|
|
Key:
|
|
|
file.name.split(".")[0] +
|
|
|
new Date().getTime() +
|
|
|
"." +
|
|
|
- file.name.split(".")[file.name.split(".").length-1],
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
ContentType: file.type,
|
|
|
Body: file,
|
|
|
"Access-Control-Allow-Credentials": "*",
|
|
|
@@ -241,8 +257,13 @@ export default {
|
|
|
.on("httpUploadProgress", function (evt) {
|
|
|
//这里可以写进度条
|
|
|
// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ _this.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
})
|
|
|
.send(function (err, data) {
|
|
|
+ _this.progress = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ }, 1000);
|
|
|
if (err) {
|
|
|
var a = _this.$refs.upload1.uploadFiles;
|
|
|
a.splice(a.length - 1, a.length);
|
|
|
@@ -291,7 +312,7 @@ export default {
|
|
|
file.name.split(".")[0] +
|
|
|
new Date().getTime() +
|
|
|
"." +
|
|
|
- file.name.split(".")[file.name.split(".").length-1],
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
ContentType: file.type,
|
|
|
Body: file,
|
|
|
"Access-Control-Allow-Credentials": "*",
|
|
|
@@ -513,4 +534,43 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
min-height: 250px;
|
|
|
}
|
|
|
+
|
|
|
+.mask {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 20000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.progressBox {
|
|
|
+ width: 500px;
|
|
|
+ height: 180px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 19px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox >>> .el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
+}
|
|
|
</style>
|
