文件上传loading

master
lion 1 year ago
parent 96420c83e2
commit e8212b2b3d

@ -160,9 +160,10 @@
<div class="xy-table-item-content">
<el-upload :action="action" :limit="1" class='upload-demo' multiple :file-list="filesList"
ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
:on-remove="handleRemove">
:on-remove="handleRemove" :on-progress="handleProgress">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -235,7 +236,9 @@
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
filesList: [],
filesList: [],
showProgress:false,
uploadProgress:0,
appCategoryList: [],
productCategoryList: [],
detail_item: [{
@ -297,6 +300,10 @@
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
addRow() {
var len = this.form.application_details.length;
@ -392,7 +399,9 @@
}
} else {
this.id = ''
this.filesList = []
this.filesList = []
this.uploadProgress = 0
this.showProgress = false
this.form = {
application_type_id: [],
category_id: [],

@ -58,9 +58,12 @@
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
:auto-upload="true" :data="uploadOther" :on-success="handlesuccess" :on-remove="handleRemove">
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -92,7 +95,9 @@
type: 'add',
uploadOther: {
token: ""
},
},
showProgress:false,
uploadProgress:0,
action: `${process.env.VUE_APP_UPLOAD_API}`,
filesList: [],
categoryList: [],
@ -130,6 +135,10 @@
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
async getCategoryList() {
const res = await getCategory({
@ -212,7 +221,9 @@
} else {
this.id = ''
this.filesList = []
this.filesList = []
this.showProgress = false;
this.uploadProgress = 0;
this.form = {
category_ids: '',
title: "",

@ -31,9 +31,11 @@
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
:auto-upload="true" :data="uploadOther" :on-success="handlesuccess" :on-remove="handleRemove">
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -75,7 +77,9 @@
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress:false,
uploadProgress:0,
form: {
title: "",
date:'',
@ -104,6 +108,10 @@
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
changeEditor(e) {
this.form.content = e
@ -180,7 +188,9 @@
this.showWang = true
} else {
this.id = ''
this.showWang = false
this.showWang = false
this.showProgress = false;
this.uploadProgress = 0;
this.filesList = []
this.form = {
title: "",

@ -54,9 +54,11 @@
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
:auto-upload="true" :data="uploadOther" :on-success="handlesuccess" :on-remove="handleRemove">
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -99,7 +101,9 @@
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress:false,
uploadProgress:0,
filesList: [],
categoryList: [],
showWang: false,
@ -134,6 +138,10 @@
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
changeEditor(e) {
this.form.content = e
@ -229,7 +237,9 @@
} else {
this.id = ''
this.filesList = []
this.filesList = []
this.showProgress = false;
this.uploadProgress = 0;
this.form = {
category_ids: '',
title: "",

@ -78,9 +78,11 @@
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
:auto-upload="true" :data="uploadOther" :on-success="handlesuccess" :on-remove="handleRemove">
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -180,7 +182,9 @@
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress:false,
uploadProgress:0,
filesList: [],
form: {
category_ids: [],
@ -230,6 +234,10 @@
return
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
async getCategoryList() {
const res = await getCategory({
@ -351,7 +359,9 @@
} else {
this.id = ''
this.filesList = []
this.filesList = []
this.showProgress = false;
this.uploadProgress = 0;
this.form = {
category_ids: [],
application_ids: [],

@ -45,9 +45,11 @@
</div>
<div class="xy-table-item-content">
<el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
:auto-upload="true" :data="uploadOther" :on-success="handlesuccess" :on-remove="handleRemove">
:auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -78,7 +80,9 @@
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress:false,
uploadProgress:0,
filesList: [],
categoryList:[],
form: {
@ -112,6 +116,10 @@
}
this.filesList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
async getCategoryList() {
const res = await getCategory({
page_size: 999,
@ -193,7 +201,9 @@
} else {
this.id = ''
this.filesList = []
this.filesList = []
this.showProgress = false;
this.uploadProgress = 0;
this.form = {
category_ids: [],
name: "",

@ -72,10 +72,12 @@
<div class="xy-table-item-content">
<el-upload :action="action" :limit='1' class='upload-demo' :file-list="videosList"
accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb,.mov"
ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-success="handlesuccessV"
ref="pictureUpload" :auto-upload="true" :on-progress="handleProgress" :data="uploadOther" :on-success="handlesuccessV"
:on-remove="handleRemoveV">
<el-button size="small" type="primary">upload</el-button>
</el-upload>
<el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
</div>
</div>
</template>
@ -127,7 +129,9 @@
uploadOther: {
token: ""
},
action: `${process.env.VUE_APP_UPLOAD_API}`,
action: `${process.env.VUE_APP_UPLOAD_API}`,
showProgress:false,
uploadProgress:0,
filesList: [],
videosList:[],
videosPicList:[],
@ -189,7 +193,10 @@
}
this.videosPicList = fileList
},
handleProgress(event, file, fileList) {
this.showProgress = true;
this.uploadProgress = event.percent;
},
submit() {
@ -316,7 +323,9 @@
this.showWang = false
this.filesList = []
this.videosList = []
this.videosPicList = []
this.videosPicList = []
this.showProgress = false;
this.uploadProgress = 0;
this.form = {
title: "",
date:'',
@ -338,6 +347,7 @@
::v-deep .title,
::v-deep .date,
::v-deep .picture,
::v-deep .videos,
::v-deep .video_pics,
::v-deep .introduction,
::v-deep .content {

Loading…
Cancel
Save