if(this.loadingStep!==0){uni.showToast({icon:'none',title:'上一张图片暂未完成'})return false;} var input = document.createElement('input');input.type = 'file';input.accept='image/*'; document.getElementById('upFile').appendChild(input);// this.$refs.input.appendChild(input);let file='';input.onchange = (event) => { file = event.path[0].files[0];let formData = new FormData();formData.append('file',file );//传给后端的格式为{'file':file}//设置将el-upload中的raw转成base64格式var reader = new FileReader();reader.readAsDataURL(file);console.log('base64');let _this=this;console.log(_this.selectList);reader.onload = function (e) {_this.replaceImage.push(this.result);_this.selectList[_this.num-1].bases.push(this.result);}try{var xhr=new XMLHttpRequest();this.percent=0;// XHR2.0新增 上传进度监控xhr.upload.onprogress = function (event) {this.loadingStep=1; console.log('监听进度');console.log(event);_this.percent = event.loaded / event.total * 100;}xhr.open('POST','接口地址');//xhr.setRequestHeader必须写在xhr.send前否则无法完成响应xhr.setRequestHeader('token','token值')//当进行文件上传formData类型文件时不需要单独设置Content-type为文件格式// console.log(formData);xhr.send(formData);xhr.onreadystatechange = ()=>{if(xhr.readyState == 4 && xhr.status == 200){this.loadingStep=2;let timeName=setTimeout(()=>{this.loadingStep=0;clearTimeout(timeName);},2000)console.log(JSON.parse(xhr.responseText));this.selectList[this.num-1]['formData'].push(JSON.parse(xhr.responseText).data);}}}catch(){}} document.getElementsByTagName('input')[0].click();
<view v-show="loadingStep!==0" class="pt-1"> <view style="color:rgb(253 197 69);" v-show="loadingStep===1">图片正在上传。。。</view><view style="color:#62D28E;" class="text-right" v-show="loadingStep===2">图片上传完成</view> <view id="stepJd" :style="'width:'+percent+'%' " style="height:10rpx;" :class="loadingStep===2?'finished':'cFinished'"></view></view>