|
@@ -11,7 +11,6 @@
|
|
|
<div class="Uploading" v-if="Uploading">
|
|
|
<span>上传中</span>
|
|
|
<div class="progress-box">
|
|
|
- <!-- <div id="progressId" class="progress"></div> -->
|
|
|
<el-progress :text-inside="true" :stroke-width="4" :percentage="percentage"></el-progress>
|
|
|
</div>
|
|
|
<i class="deleteImg2" @click="handleRemove(image,ind)"></i>
|
|
@@ -42,43 +41,58 @@ export default {
|
|
|
return {
|
|
|
showTrue: true,
|
|
|
tempArr: [],
|
|
|
- percentage: 30,
|
|
|
+ percentage: 0,
|
|
|
Uploading: false, //上传中
|
|
|
failImg: false //上传失败
|
|
|
};
|
|
|
},
|
|
|
components: { zoomImage },
|
|
|
props: ["souseArr"],
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ console.log(this.souseArr);
|
|
|
+ },
|
|
|
methods: {
|
|
|
distinctFile(a) {
|
|
|
+ console.log(a)
|
|
|
return Array.from(new Set(a));
|
|
|
},
|
|
|
getImage(event) {
|
|
|
this.Uploading = true;
|
|
|
- this.fileName = new Date().getTime() + "_" + event.name;
|
|
|
- let url =
|
|
|
- "/image-service/common/image_upload?systemId=saas&secret=46f869eea8b31d14&key=" +
|
|
|
- this.fileName;
|
|
|
- let that = this;
|
|
|
- let reader = new FileReader();
|
|
|
- reader.readAsArrayBuffer(event.raw);
|
|
|
- reader.onload = function(e) {
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
- xhr.open("POST", url);
|
|
|
- xhr.send(reader.result);
|
|
|
- xhr.onreadystatechange = function() {
|
|
|
- if (xhr.readyState == 4) {
|
|
|
- if (xhr.status == 200) {
|
|
|
- let src = that.getPreviewSrc(event.raw);
|
|
|
- that.tempArr.push(that.fileName);
|
|
|
- that.souseArr.push(that.fileName);
|
|
|
- that.$emit("setPic", that.souseArr);
|
|
|
- that.Uploading = false;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- };
|
|
|
+ this.percentage = 0;
|
|
|
+ var percentage = this.percentage;
|
|
|
+ var test = setInterval(() => {
|
|
|
+ percentage = this.percentage;
|
|
|
+ if (percentage < 100) {
|
|
|
+ percentage += 10;
|
|
|
+ this.percentage = percentage;
|
|
|
+ }
|
|
|
+ if (percentage == 100) {
|
|
|
+ this.fileName = new Date().getTime() + "_" + event.name;
|
|
|
+ let url =
|
|
|
+ "/image-service/common/image_upload?systemId=saas&secret=46f869eea8b31d14&key=" +
|
|
|
+ this.fileName;
|
|
|
+ let that = this;
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.readAsArrayBuffer(event.raw);
|
|
|
+ reader.onload = function(e) {
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open("POST", url);
|
|
|
+ xhr.send(reader.result);
|
|
|
+ xhr.onreadystatechange = function() {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ let src = that.getPreviewSrc(event.raw);
|
|
|
+ // that.tempArr.push(that.fileName);
|
|
|
+ that.souseArr.push(that.fileName);
|
|
|
+ that.$emit("setPic", that.souseArr);
|
|
|
+ that.Uploading = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ };
|
|
|
+ clearInterval(test);
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
},
|
|
|
getPreviewSrc(file) {
|
|
|
if ("URL" in window) {
|
|
@@ -184,27 +198,8 @@ export default {
|
|
|
.progress-box {
|
|
|
width: 94px;
|
|
|
height: 4px;
|
|
|
- background: rgba(233, 233, 233, 1);
|
|
|
border-radius: 2px;
|
|
|
margin: 0 auto;
|
|
|
- margin-top: 8px;
|
|
|
- position: relative;
|
|
|
- .progress {
|
|
|
- width: 0px;
|
|
|
- height: 4px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- border-radius: 2px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- transition: all 2s;
|
|
|
- -moz-transition: all 2s;
|
|
|
- -webkit-transition: all 2s;
|
|
|
- -o-transition: all 2s;
|
|
|
- }
|
|
|
- .progressHover {
|
|
|
- width: 94px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
.Uploading:hover .deleteImg2 {
|