罗湖网站 建设深圳信科,简单微信小程序制作,织梦网站内容替换,网络培训学习心得el-upload上传过程中加进度条#xff0c;进度条el-progress配合fake-progress一起使用#xff0c;效果如下#xff1a; 安装
npm install fake-progress
在用到的文件里面引用
import Fakeprogress from fake-progress; 这个进度条主要是假的进度条#xff…el-upload上传过程中加进度条进度条el-progress配合fake-progress一起使用效果如下 安装
npm install fake-progress
在用到的文件里面引用
import Fakeprogress from fake-progress; 这个进度条主要是假的进度条他开始加载后一直不会加载到100%只有在结束的时候才会到100%
el-progress typecircle :percentageparseInt(fake.progress * 100)/el-progress fake: new Fakeprogress({ timeConstant: 10000, // autoStart: true,
}),
进度条开始this.fake.start();
进度条结束this.fake.end(); 完整代码
templatedivel-uploadrefuploadv-modelfileclassupload-importaction:acceptjpg,png,text:auto-uploadtrue:show-file-listFileList:http-requesthandleUpload:before-uploadbeforeUpload:on-changehandleChange:on-exceedhandleExceed:before-removebeforeRemovedragmultiple:disableduploadLoading/el-uploaddiv classupload-loading-mask v-ifuploadLoadingel-progresstypecircle:percentageparseInt(fake.progress * 100)/el-progress/div/div
/templatescript
export default {data() {return {uploadLoading: false,file: ,fileList: [],fake: new Fakeprogress({timeConstant: 10000,// autoStart: true,}),fileCount:0,fileTotal:0};},mounted() {},methods: {async handleUpload(file) {this.fake.progress 0;if (file.file.size 0) {this.$message.error(不能上传空文件);return;}this.uploadLoading true;this.fake.start();await Api.uploadFiles(params).then(res) {if (res) {this.fileCount;if (this.fileCount this.fileTotal) {this.fileCount 0;this.fake.end(); //结束进度条this.uploadLoading false;}} else {this.fake.end();this.uploadLoading false;return;}}).catch((err) {this.fake.end();this.fake.progress 0;this.uploadLoading false;console.log(err);});},beforeUpload(file) {},handleChange(filelist) {this.fileTotal filelist.length;},beforeRemove(){}}
};
/script
