ajax上传文件及监听进度 PC端或H5

el/2023/9/24 23:06:55
                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>


http://www.ngui.cc/el/3419111.html

相关文章

uniapp打包H5相关配置

在pages.json页如果tabBar设置的icon是png不是字体图标则从app切换h5打包后需要修改图片path路径&#xff1a; app的iconPath或selectedIconPath是获取当前项目文件下&#xff1a;static/images/tab/mine.png h5使用的时候需要改为外部链接地址图片&#xff1a;http://xxx/xx…

uniapp配置权限

在登录的时候后端接口查出当前用户可进入页面路由的数组 let dataList[{name:first,uri:/1},{name:second,uri:/2},{name:third,uri:/3},{name:four,uri:/4} ] 前端在每个页面的详情页执行验证&#xff0c;如果当前的路由不包含返回的数组中的内容则出现蒙板 前端获取当前页…

uniapp后端配置升级

升级选择原生app制作wgt生成wgt文件后上传到OSS,后端数据库修改url及version即可&#xff0c;将status改为上线

用一行CSS分别实现10种现代布局

01、超级小中 在没有和flex grid之前&#xff0c;垂直居中一直不能很优雅的实现。而现在&#xff0c;可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中。 <div class"parent blue" > <div class"box coral" contenteditable>…

css filter的神奇用途

背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜&#xff0c;滤镜通常用于调整图像&#xff0c;背景和边框的渲染。它的值可以为 filter 函数 或使用 url 添加的svg滤镜。 filter: []* | none filter: url(file.svg#filter-element-id) 可以用…

10个实用技巧让你的 Vue 代码更优雅

前言&#x1f34a; 作为深度代码洁癖&#xff0c;我们都希望能写出简单高效的代码&#xff0c;让我们的代码看起来更加优雅&#xff0c;让我们抛弃繁杂的代码&#xff0c;一起开启简单的旅程~~ slots 新语法向 3.0 看齐 ❝ 使用带有“&#xff03;”的新命名插槽缩写语法,在V…

前端经典面试题 ( 60道前端面试题包含 JS、CSS、React、网络、浏览器、程序题等)

简答题 1、什么是防抖和节流&#xff1f;有什么区别&#xff1f;如何实现&#xff1f; 参考答案 防抖 触发高频事件后n秒内函数只会执行一次&#xff0c;如果n秒内高频事件再次被触发&#xff0c;则重新计算时间 思路&#xff1a; 每次触发事件时都取消之前的延时调用方法 f…

100个javascript片段

实现字符串长度截 function cutstr(str, len) { var temp; var icount 0; var patrn /[^\x00-\xff]/; var strre ""; for (var i 0; i < str.length; i) { if (icount < len - 1) { …

nuxt配置自定义本地访问端口号

在package.json "config": {"nuxt": {"host": "127.0.0.1","port": "1818"} },

Vue2的响应式实现,Vue3的响应式实现

Vue2的响应式实现 <input id"username" /> 显示输入的值&#xff1a;<div id"userNames"></div>//实现数据劫持双向绑定 let obj{}; let name"":对象 对象属性 Object.defineproperty(obj,username,{get:function(){retur…