uniapp小程序实现上传图片功能,并显示上传进度
效果图:

实现方法:
一、通过uni.chooseMedia(OBJECT)方法,拍摄或从手机相册中选择图片或视频。
官方文档链接: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia

uni.chooseMedia({count: 9,mediaType: ['image','video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res) {console.log(res.tempFiles)}
})
二、使用uni.uploadFile(OBJECT)方法上传文件。
官方文档链接: https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile

uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;uni.uploadFile({url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test'},success: (uploadFileRes) => {console.log(uploadFileRes.data);}});}
});
var uploadTask = uni.uploadFile({url: 'https://www.example.com/upload', //仅为示例,并非真实接口地址。complete: ()=> {}
});
uploadTask.abort();
三、使用progress进度条组件,实现上传进度显示。

三、完整代码。
功能:1、上传图片支持进度显示 2、控制每张图片大小不超过8兆 3、当选择图片超过最大数量时,添加图片按钮控制隐藏
<template><view class="material-box"><view class="material-select"><view class="material-png" v-for="(item,index) in imageList" :key="index"><view class="material-sent" v-if="!item.uploadStatus"><progress class="select-tips" :percent="item.schedule" stroke-width="4" activeColor="#B99C65" /><view class="tips-text">上传进度{{item.schedule}}%</view></view><image src="@/qualifyLnvestor/static/close.png" mode="" class="close-png" @click="closeImg(index)"></image><image :src="item.tempFilePath" mode="" class="selected-png" v-if="item.type=='image'"></image><view v-else class="selected-name">{{item.name}}</view></view><view class="material-png" @click="selectPicture" v-if="selectimageIsShow"><image src="@/qualifyLnvestor/static/picture.png" mode="" class="picture-png"></image><view class="picture-text">添加证明</view></view></view></view>
</template><script>export default {data() {return {imageList: [], // 反显图片集合cusNo: '', // 客户号selectimageIsShow: true, // 添加图片功能按钮默认显示accessToken: '',};},methods: {selectPicture() {const that = this;// if(this.imageList.length == 15){// showModal("温馨提示", '最多上传15个文件')// }else{// let counts = (15-this.imageList.length) > 9 ? 9 : (15-this.imageList.length);if (this.imageList.length == 5) {showModal("温馨提示", '最多上传5个文件')} else {let counts = (5 - this.imageList.length)uni.chooseMedia({count: counts,mediaType: ['image'],sourceType: ['album', 'camera'],success: (res) => {console.log('选择图片', res)let tempFilePaths = res.tempFiles;let selectImage = [];tempFilePaths.forEach((item) => {if (item.size >= 8388608) {showModal("温馨提示", '单个文件大小不能超过8M')} else {selectImage.push({type: item.fileType,tempFilePath: item.tempFilePath,name: new Date().getTime(),schedule: 0,uploadStatus: false,})}})that.imageList = that.imageList.concat(selectImage);if (that.imageList.length == 5) {that.selectimageIsShow = false}that.imageList.forEach((item) => {if (!item.uploadStatus) {const uploadTask = uni.uploadFile({url: apiUrl.hotActivity +'/quaInv/upload', //上传接口地址filePath: item.tempFilePath,name: 'fileList',header: {'content-type': 'multipart/form-data'},formData: {'cusNo': that.cusNo,'accessToken': that.accessToken,},success: (uploadFileRes) => {if (uploadFileRes.statusCode == 200) {let uploadDate = JSON.parse(uploadFileRes.data);if (uploadDate.code == 'MOP000000') {item.contenidNo = uploadDate.data;} else {that.selectimageIsShow = true;this.imageList = this.imageList.filter(item => {return item.contenidNo !=undefined && item.contenidNo == null &&item.contenidNo == ''});}}console.log(uploadFileRes);// item.contenidNo = uploadFileRes.data.}});uploadTask.onProgressUpdate((res) => {console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + res.totalBytesSent);console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);item.schedule = res.progress;if (res.progress == 100) {item.uploadStatus = true;}// 测试条件,取消上传任务。if (res.progress > 50000) {uploadTask.abort();}});}})}});}}}}
</script>
<style lang="scss">.material-box {width: 686rpx;padding: 32rpx;background: #fff;margin-top: 24rpx;margin-left: 32rpx;padding-bottom: 32rpx;border-radius: 8rpx;.item-top {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: 500;color: #333;}.material-item {width: 622rpx;border-radius: 8rpx;background: #f8f8f8;padding: 16rpx;margin-top: 24rpx;.item-list {font-size: 28rpx;font-weight: 400;line-height: 56rpx;height: 56rpx;color: #B99C65;}}.material-select {display: flex;flex-wrap: wrap;margin-top: 24rpx;.material-png {width: 191rpx;height: 191rpx;border-radius: 12rpx;border: 2rpx dashed #B99C65;margin-right: 8rpx;margin-left: 8rpx;margin-bottom: 16rpx;position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;background: #F8F8F8;.material-sent {width: 189rpx;height: 189rpx;background: rgba(245, 245, 245, 0.5);position: absolute;display: flex;justify-content: center;align-items: center;flex-direction: column;.select-tips {width: 130rpx;height: 10rpx;margin-bottom: 12rpx;}.tips-text {font-size: 24rpx;color: #B99C65;}}.close-png {position: absolute;top: 6rpx;right: 6rpx;width: 40rpx;height: 40rpx;}.selected-png {width: 180rpx;height: 180rpx;border-radius: 12rpx;}.selected-name {width: 180rpx;word-break: break-all;overflow: hidden;}.picture-png {width: 40rpx;height: 32rpx;margin-bottom: 8rpx;}.picture-text {font-size: 28rpx;height: 40rpx;line-height: 40rpx;color: #B99C65;}}}}
</style>
相关文章:
uniapp小程序实现上传图片功能,并显示上传进度
效果图: 实现方法: 一、通过uni.chooseMedia(OBJECT)方法,拍摄或从手机相册中选择图片或视频。 官方文档链接: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia uni.chooseMedia({count: 9,mediaType: [image,video],so…...
基于物理场的动态模式分解(piDMD)研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
Docker部署rabbitmq遇到的问题 Stats in management UI are disabled on this node
1. Stats in management UI are disabled on this node #进入rabbitmq容器 docker exec -it {rabbitmq容器名称或者id} /bin/bash#进入容器后,cd到以下路径 cd /etc/rabbitmq/conf.d/#修改 management_agent.disable_metrics_collector false echo management_age…...
Python搭建http文件服务器实现手机电脑文件传输功能
第一种代码的界面如下:(有缺点,中文乱码) # !/usr/bin/env python3 # -*- coding:utf-8 _*-"""Simple HTTP Server With Upload. python -V3.6 This module builds on http.server by implementing the standard G…...
微信小程序实现拖拽的小球
目录 前言 js 获取微信小程序中获取系统信息 触摸移动事件的处理函数 触摸结束事件的处理函数 用于监听页面滚动事件 全局参数 html CSS 前言 小程序开发提供了丰富的API和事件处理函数,使得开发者可以方便地实现各种交互功能。其中,拖拽功能…...
uniapp的逆地理编码 和地理编码
1.先打开高德地图api找到那个 地理编码 2.封装好我们的请求 3.逆地理编码 和地理编码 都是固定的 记住自己封装的请求 就可以了 这个 是固定的 方式 下面这个是固定的 可以复制过去 getlocation就是uniapp提供的 获取经纬度 然后 下面的 就是高德地图提供的 方法 要想使用我…...
在Centos环境中搭建Nginx环境
一、Nginx概念简介 Nginx是一个轻量级的高性能HTTP反向代理服务器,同时它也是一个通用类型的代理服务器,支持绝大部分协议,如TCP、UDP、SMTP、HTTPS等。 Nginx与redis相同,都是基于多路复用模型构建出的产物,因此它与R…...
20W IP网络吸顶喇叭 POE供电吸顶喇叭
SV-29852T 20W IP网络吸顶喇叭产品简介 产品用途: ◆室内豪华型吸顶喇叭一体化网络音频解码扬声器,用于广播分区音频解码、声音还原作用 ◆应用场地如火车站、地铁、教堂、工厂、仓库、公园停车场等;室内使用效果均佳。 产品特点ÿ…...
React 之 Suspense和lazy
一. Suspense 参考链接:https://react.docschina.org/reference/react/Suspense suspense:n. 焦虑、悬念 <Suspense> 允许你显示一个退路方案(fallback)直到它的所有子组件完成加载。 <Suspense fallback{<Loadin…...
Kafka中的 ISR 机制
ISR 是什么 ISR 的全称叫做: In-Sync Replicas (同步副本集), 可以理解为和 leader 保持同步的所有副本的集合。ISR 动态维护了一个和 leader 副本保持同步副本集合,ISR 中的副本全部都和 leader 的数据保持同步。 设一个场景&a…...
01 Python 网络爬虫:爬虫技术的核心原理
不夸张地说,现在哪怕是初中生,只要花点儿时间、精力稍微按「网络爬虫」的开发步骤学习了解一下,也能把它玩得贼溜。 听起来感觉是很高大上的东西,但实际上并不复杂,也就是使用了某种编程语言按照一定步骤、规则主动通…...
【Rust】Rust学习 第十四章进一步认识 Cargo 和 Crates.io
本章会讨论 Cargo 其他一些更为高级的功能,我们将展示如何: 使用发布配置来自定义构建将库发布到 crates.io使用工作空间来组织更大的项目从 crates.io 安装二进制文件使用自定义的命令来扩展 Cargo Cargo 的功能不止本章所介绍的,关于其全…...
Android性能优化----执行时间优化
作者:lu人皆知 在APP做启动优化时,Application会做一些初始化的工作,但不要在Application中做耗时操作,然而有些初始化工作可能是很耗时的,那怎么办?初始化操作可以开启子线程来完成。 计算执行时间 常规…...
基于Python的微博大数据舆情分析,舆论情感分析可视化系统,可作为Python毕业设计
运行效果图 基于Python的微博大数据舆情分析,舆论情感分析可视化系统 系统介绍 微博舆情分析系统,项目后端分爬虫模块、数据分析模块、数据存储模块、业务逻辑模块组成。 先后进行了数据获取和筛选存储,对存储后的数据库数据进行提取分析处…...
被迫学习一波Linux命令
事情起因 部署一个服务,人家说了最低配置是3G,我没当回事,拿着个2G的服务器直接就上了,结果,哈哈,都能猜到结果:服务器内存爆了!!!而且最可气的是服务器还登…...
字符串变量拼接操作的底层原理
在java中,字符串变量拼接操作使用的是StringBuilder或StringBuffer类,这两个类都是可变的字符串缓冲区。java中的字符串是不可变的,因此在进行字符串拼接时需要使用可变的字符串缓冲区,以避免不必要的内存分配和复制。具体来说&am…...
Wlan安全——认证与加密方式(WPA/WPA2)
目录 终端认证技术 WEP认证 PSK认证 802.1x认证与MAC认证 Portal认证 数据加密技术 WEP加密 TKIP加密 CCMP加密 TKIP和CCMP生成密钥所需要的密钥信息 802.11安全标准 WEP共享密钥认证、加密工作原理 WEP共享密钥认证 WEP加解密过程 PSK认证以及生成动态密钥的工…...
Leetcode-每日一题【剑指 Offer 31. 栈的压入、弹出序列】
题目 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如,序列 {1,2,3,4,5} 是某栈的压栈序列,序列 {4,5,3,2,1} 是该压栈序列对应的一个弹出序列…...
软件需求-架构师之路(五)
软件需求 软件需求: 指用户 对系统在功能、行为、性能、设计约束等方面的期望。 分为 需求开发 和 需求管理 两大过程。 需求开发: 需求获取需求分析需求定义(需求规格说明书)需求验证:拉客户一起评审,…...
Python自带的IDLE有什么用
在Python的官方解释器中,自带了一个名为IDLE(Interactive DeveLopment Environment)的集成开发环境。 一、简化代码调试过程 很多初学者在编写Python代码时,经常会遇到一些问题需要调试。而在IDLE中,我们可以通过设置断点、单步调试等方法&…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...
数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)
目录 🔍 若用递归计算每一项,会发生什么? Horners Rule(霍纳法则) 第一步:我们从最原始的泰勒公式出发 第二步:从形式上重新观察展开式 🌟 第三步:引出霍纳法则&…...
在Zenodo下载文件 用到googlecolab googledrive
方法:Figshare/Zenodo上的数据/文件下载不下来?尝试利用Google Colab :https://zhuanlan.zhihu.com/p/1898503078782674027 参考: 通过Colab&谷歌云下载Figshare数据,超级实用!!࿰…...
