uniapp上传图片显示进度

等级 1200 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)
             })
        } 
    })
}
收藏
评论区

相关推荐

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
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的动态绑定,包括对象
「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
java版本springcloud+springboot+mybatis 分布式 微服务 多租户 电子商务 直播带货 短视频带货 社交电商平台
涉及平台:平台管理(包含自营店面)、商家端(PC端、手机端)、买家平台(PC端、H5/公众号、小程序、APP端(IOS/Android)、微服务平台(业务服务) 核心架构:Spring Cloud、Spring Boot、Mybatis、Redis、SFTP 前端框架:VUE、Uniapp、Bootstrap/H5/CSS3、IOS、Android、小程
ElementUI的Upload上传,配合七牛云储存图片
七牛云服务器的储存区域 ----------- 存储区域 地域简称 上传域名 华东 z0 服务器端上传:`http(s)://up.qiniup.com` 华东 z0 客户端上传: `http(s)://upload.qiniup.com` 华北 z1 服务器端上传:`http(s)://up-z1.qiniup.com` 华北
Springboot+ajax前后端传参
记录一下Springboot前后端传参方式 基础环境:   Idea2018.3.2   maven3.6.1   jsp   js,ajax   Springboot 代码:   js: $(document).ready(function() { //添加用户信息,点击事件 $('#su
Uniapp使用GoEasy实现websocket实时通讯
Uniapp作为近来最火的移动端开发技术,一套代码,可以打包成Android/iOS app和各种平台的小程序,可谓是没有最方便只有更方便。 GoEasy上架DCloud Uniapp插件市场已经有一个多月了,收到很多Uniapp开发人员的赞扬和好评,小编在此隔着屏幕向大家鞠躬,小编和GoEasy团队会继续努力,持续为Uniapp开发者提供最简单且优雅的A
uniapp引入vue
首先目录结构是这样的 ![目录](https://oscimg.oschina.net/oscnet/up-c38df71b7be4ebcdafdc248216aa3f69e64.png "目录") > lib文件夹里面存放四个js文件,ch(存放中文语言)、en(存放英文语言)、index(设置语言)、vue-i18n(vue-i18n插件);同时在m