uniapp上传图片显示进度

等级 693 1 0

uniapp上传图片,官方文档写的比较清楚,此处笔记是因为客户特殊要求,上传提示进度条,查到方法特此笔记。

uploadImg(){
    var _self = this;
    uni.chooseImage({
        count: 1,
        sizeType:['copressed'],
        success:(res) =>{
            console.log(res)
            //因为有一张图片, 输出下标[0], 直接输出地址
             var imgFiles = res.tempFilePaths[0]
             console.log(imgFiles)
             _self.imgUrl = imgFiles;
             // 上传图片
             // 做成一个上传对象
             var uper = uni.uploadFile({
                 // 需要上传的地址
                 url:'http://192.168.0.15:8080/gas-site-admin/store/store/uploadFile',
                 // filePath  需要上传的文件
                 filePath: imgFiles,
                 name: 'file',
                 success(res1) {
                     // 显示上传信息
                     console.log(res1)
                     if(res1.statusCode == 200){
                         uni.showToast({
                            icon:'success',
                            title:'上传成功'
                         })
                         console.log('上传路径是:'+res1.data)
                     }
                }
             });
             // onProgressUpdate 上传对象更新的方法
             uper.onProgressUpdate(function(res){
                 // 进度条等于 上传到的进度
                 _self.percent = res.progress
                 console.log('上传进度' + res.progress)
                 console.log('已经上传的数据长度' + res.totalBytesSent)
                 console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
             })
        } 
    })
}
收藏
评论区

相关推荐

下载二维码至钉盘
后端生成二维码的普通文件流,前端接收后在img标签中渲染 将二维码下载至钉盘通过接口获取后端返回mediaId字段,采用“dingtalkjsapi”插件中的方法下载 注意:dingTalkFun中,除了corId和mediaId必传外,文件名name也是必须要传的!!! <template <div class"onlineSign"
uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。 如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
uniapp上传图片显示进度
uniapp上传图片,官方文档写的比较清楚,此处笔记是因为客户特殊要求,上传提示进度条,查到方法特此笔记。 uploadImg(){ var _self this; uni.chooseImage({ count: 1, sizeType:'copressed', success:(res) { console.log(r
PHP Cookie与Session的使用与区别
Cookie与SessionCookie和session是目前使用的两种存储机制。cookie是从一个WEB页到下一个WEB页面的数据传送方法,cookie存储在客户端;Session是让数据在页面中持续有效的一个传递方法,session存储在服务器端。掌握了cookie与session这两个技术,在WEB网站页面间信息传递的安全性是
聊聊dubbo协议2
在中介绍了attachments在consumer和provider间的传递情况,有个疑问没有给出答案。为什么2.7.x版本的dubbo不支持provider端向consumer端回传隐式参数呢?今天的续集将揭晓答案。 抓包确定是provider没发还是consumer丢掉 以下测试基于dubbo 2.7.6版本在provider端加入下面的代码
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc 前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。 一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
uni-app入门教程(2)页面样式、配置文件和生命周期
前言本文先介绍uniapp的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。 一、页面样式与布局 1.尺寸单位uniapp框架目前仅支持长度单位px和%。与传统web页面不同,px是相对于基准宽度
uni-app入门教程(3)数据绑定、样式绑定和事件处理
@toc 前言本文的内容主要包含3部分:声明并渲染变量,包括条件渲染;通过class和style定义样式并动态绑定;事件的绑定,包含了事件传参。三部分均具有动态绑定的特性。 一、模板语法及数据绑定 1.声明和渲染变量在使用变量前,需要先声明,一般在data块中进行声明,如hello uniapp项目中index.vue中定义的title变
uni-app入门教程(4)组件的基本使用
@toc 前言本文主要介绍了uniapp中的组件,包括四大类:基础组件(scrollview、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。 一、基础组件组件是视
uni-app入门教程(5)接口的基本使用
前言本文主要介绍uniapp提供的一些基础接口,包括:网络请求接口,用于通过指定的请求方法,携带特定的数据,向特定的地址请求并返回请求结果;图片处理接口,包括选择、预览、获取信息、保存到本地等接口;文件处理接口,包括文件上传和下载接口;数据缓存接口,包括以同步或异步的方式保存、获取或删除数据的接口。 一、网络请求小程序要想正常运转,都需要与服务器端进
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
前端上传本地图片保存到数据库里
引用一下js:fileupload.js       function uploadImg1()                 var f document.getElementById('uploadFile1').files[0]                var src window.URL.createObjectURL(f);   
.net web core 如何编码实现文件上传功能
关于我 前言在进行Web前后端分析开始时,我们经常会碰到文件上传的需求。上传用户头像,上传认证材料、审核材料等,这些都可以归类为文件上传功能。今天主要把自己在开发过程中的心得进行一个整理,供大家学习。 开启静态文件中间件默认情况下,静态文件(如 HTML、CSS、图像和 JavaScript)是 ASP.NET Core 应用直接提供给客户端的资产。开启静态
「uniapp」自定义iconfont
1. 进入 2. 搜索自己需要的图标点击加入购物车中 3. 将购物车中的图标添加到项目中首先进入购物车点击添加至项目,没有项目就新建一个项目 4. 将图标下载至本地 5. 将文件复制到uniapp项目中// 将.ttf文件 @/common 引入@fontface fontfamily: "iconfont"; / Project id 2570483
SCF构建小型服务端并结合uni-app
使用腾讯云SCF构建小型服务端并结合uniapp()小程序我们这里手写了一个nodejs环境下的用户体系使用了之前写的一个数据库连接插件dmhqmysqlpool比较垃圾 凑合用文档地址为 也使用了md5 npm install jsmd5这里使用邮箱发送验证码先在本地写好 再上传云函数 配置数据库连接安装 npm install dmhsqmysqlpo