uni-app uni.uploadFile动态显示进度百分比

在文件上传时想要展示真实上传文件百分比,无奈uni.showloading入参是一个静态的对象,不会动态更新
所以找到了plus.nativeUI.showWaiting方法, 使用实例的setTitle方法动态写入

// !!!watch中,注意nativeWaiting对象
watch: {
      progressText: {
        handler: function(v) {
          if(v) {
            this.nativeWaiting.setTitle(v);
          } else if(this.nativeWaiting){
            this.nativeWaiting.close()
          }
        },
        immediate: true,
      },
},
methods: {
	async selectVideo() {
	  let _vm = this;
	  if (this.mediaLength >= 6) {
	  	let isContinue = await this.isFullImg();
	  	if (!isContinue) {
	  		return;
	  	}
	  }
	
	  let soType = sourceType[this.sourceTypeIndex];
	  let siType = sizeType[this.sizeTypeIndex];
	  uni.chooseVideo({
	    sourceType: soType,
	    compressed: true,
	    success: (chooseImageRes) => {
	      _vm.showLoading();
	      _vm.uploadFile(true, chooseImageRes.tempFilePath);
	    }
	  });
	},
	showLoading() { // 实例化plus.nativeUI
	  this.nativeWaiting = plus.nativeUI.showWaiting('准备上传',{
	    width: '25%',
	    loading: {
	      display: 'block',
	      type: 'snow'
	    }
	  });
	},
	uploadFile(isVideo, filesPath) {
		// 记录返回对象,便于获取对象进度
		let uploadTask = uni.uploadFile({
		   url: REQ_PREFIX + '/trialProduceExamine/saveTrialProduceExamineAttach',
		   files: imageVideoList,
		   fileType: fileType,
		   timeout: 6000000,
		   header: {
		     // 'content-type': 'multipart/form-data'
		     'access_token': this.userCode+'_'+token
		   },
		   name: 'file0',
		   formData: {
		     siteCode: this.siteCode
		   },
		   success: (uploadFileRes) => {
		   }
		}
		uploadTask.onProgressUpdate((res) => {
		  _vm.progressText = res.progress + '%';
		  _vm.percent = res.totalBytesSent + '/' + res.totalBytesExpectedToSend;
		  if(res.progress === 100)  {
		    _vm.progressText = '上传完成';
		    setTimeout(() => {
		      _vm.progressText = '';
		    }, 1500)
		
		  }
		});
	}
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值