|
|
@@ -14,6 +14,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox"><img :src="require('../../../assets/images/loading.gif')" />上传中，请稍后</div>
|
|
|
+ <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -30,6 +36,8 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// imgList: []
|
|
|
+ proVisible: false,
|
|
|
+ progress: 0
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -58,6 +66,8 @@ export default {
|
|
|
window.AWS.config.region = 'cn-northwest-1' // 设置区域
|
|
|
var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' }}) // 选择桶
|
|
|
var _this = this
|
|
|
+ _this.progress = 0
|
|
|
+ _this.proVisible = true
|
|
|
if (file) {
|
|
|
var params = {
|
|
|
Key:
|
|
|
@@ -79,8 +89,14 @@ export default {
|
|
|
.upload(params, options)
|
|
|
.on('httpUploadProgress', function(evt) {
|
|
|
// 这里可以写进度条
|
|
|
+ _this.progress = parseInt((evt.loaded * 80) / evt.total)
|
|
|
})
|
|
|
.send(function(err, data) {
|
|
|
+ _this.progress = 100
|
|
|
+ _this.mediaLoading = false
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false
|
|
|
+ }, 1000)
|
|
|
if (err) {
|
|
|
// _this.$message.error('上传失败')
|
|
|
} else {
|
|
|
@@ -153,5 +169,48 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .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: 85%;
|
|
|
+ max-width: 300px;
|
|
|
+ height: 100px;
|
|
|
+ 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: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progressBox .lbox img {
|
|
|
+ width: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .progressBox {
|
|
|
+ .el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
+ height: 20px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
