【小程序上传图片封装2024,支持多图,带进度,上传头像】

import config from './config';// 支持多图,显示进度
export function uploadImages(count = 1, sourceType, onLoading = null, showProgress = false, fileKey = 'file') {return new Promise((resolve, reject) => {wx.chooseMedia({count: count, // 可以选择的图片数量sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图sourceType, // 可以指定来源是相册还是相机success: (chooseResult) => {console.log('chooseResult', chooseResult);const tempFilePaths = chooseResult.tempFiles;const uploadPromises = tempFilePaths.map((filePath, index) => {const baseUrl = (env == 'pro' || !env) ? config.BASE_URL : config.DEV_URL;const param = 'demo';const formData = {...param,sign: signStr,};console.log('filePath:', filePath, 'name:', fileKey, 'formData', formData);return new Promise((resolve, reject) => {const uploadTask = wx.uploadFile({url: `${baseUrl}${config.UPLOAD_URL}`,filePath: filePath.tempFilePath,name: fileKey,header: {"Content-Type": "multipart/form-data"},formData: {data: JSON.stringify(formData)},success: (uploadResult) => {console.log(uploadResult);if (uploadResult.statusCode === 200) {const data = JSON.parse(uploadResult.data);if (returnLocation) {resolve(data);return;}resolve(data.url);} else {console.error(`Upload failed with status code ${uploadResult.statusCode}`);reject(new Error(`Upload failed with status code ${uploadResult.statusCode}`));}},fail: (error) => {console.error('Upload failed:', error);reject(error);}});if (showProgress) {uploadTask.onProgressUpdate((res) => {console.log(`File ${index + 1} progress: ${res.progress}%`);if (onLoading) {onLoading(`上传中... ${res.progress}%`);}});}});});if (onLoading) {onLoading('上传中...');}Promise.all(uploadPromises).then((results) => {console.log('上传成功-----', results);if (onLoading) {onLoading(null); // 传递 null 表示隐藏 loading}resolve(results);}).catch((error) => {if (onLoading) {onLoading(null); // 传递 null 表示隐藏 loading}wx.showToast({title: '上传失败',icon: 'none'});reject(error);});},});});
};// 上传头像,支持裁剪,小程序自带功能
<button data-type="avatar" open-type="chooseAvatar" bindchooseavatar="handleAvatarChoose">
// 对应js
handleAvatarChoose(e) {uploadAvatar(e.detail.avatarUrl).then((url) => {console.log('上传成功,返回内容是:', url);this.setData({ avatar: url });}).catch((error) => {console.log(`图片上传失败--${JSON.stringify(error)}`);});},// 封装的上传
export function uploadAvatar(avatarUrl) {return new Promise((resolve, reject) => {const param = {nonce: getNum(),timestamp: new Date().getTime() + '',token: wx.getStorageSync('token') || '',userid: wx.getStorageSync('userid') || '',};const env = wx.getStorageSync('env');const baseUrl = (env == 'pro' || !env) ? config.BASE_URL : config.DEV_URL;const formData = {...param,sign: signStr,};console.log('filePath:', avatarUrl,  'formData', formData);wx.uploadFile({url: `${baseUrl}${config.UPLOAD_URL}`,filePath: avatarUrl,name: 'file', // 后台要绑定的名称header: {'Content-Type': 'multipart/form-data',},formData: {data: JSON.stringify(formData),},success: function (res) {if (res.statusCode === 200) {try {const data = JSON.parse(res.data);resolve(data.url); // 假设返回的数据中包含图片的 URL} catch (error) {console.error('JSON parse error:', error);reject(new Error('JSON parse error'));}} else {console.error(`Upload failed with status code ${res.statusCode}`);reject(new Error(`Upload failed with status code ${res.statusCode}`));}},fail: function (error) {console.error('Upload failed:', error);reject(error);}});});
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/58313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac上面压缩文件出现__MACOSX文件夹问题

问题 最近需要上传前端zip包&#xff0c;但是&#xff0c;mac右键压缩dist目录的时候&#xff0c;能正常压缩。但是解压这个目录的时候出现了__MACOSX文件夹&#xff0c;是真的坑。 解决 zip -r -X <文件名>.zip <需要压缩的目录>例子如下&#xff1a; zip -r …

Chromium HTML5 新的 Input 类型date 对应c++

一、Input 类型: date date 类型允许你从一个日期选择器选择一个日期。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head> <body><form action"demo-form.php"…

Docker 常用命令全解析:提升对雷池社区版的使用经验

Docker 常用命令解析 Docker 是一个开源的容器化平台&#xff0c;允许开发者将应用及其依赖打包到一个可移植的容器中。以下是一些常用的 Docker 命令及其解析&#xff0c;帮助您更好地使用 Docker。 1. Docker 基础命令 查看 Docker 版本 docker --version查看 Docker 运行…

python 爬虫 入门 五、抓取图片、视频

目录 一、图片、音频 二、下载视频&#xff1a; 一、图片、音频 抓取图片的手法在上一篇python 爬虫 入门 四、线程&#xff0c;进程&#xff0c;协程-CSDN博客里面其实有&#xff0c;就是文章中的图片部分&#xff0c;在那一篇文章&#xff0c;初始代码的28&#xff0c;29行…

保姆级教程 | 全流程免费:合并多份长宽不同的PDF成相同大小并进行瘦身

背景 由于老板需要&#xff0c;完成不同PDF文件&#xff08;a&#xff0c;b&#xff0c;c....&#xff09;合并&#xff0c;同时要求主文件&#xff08;A&#xff09;小于6M。合并过程中发现各个PDF大小&#xff08;长宽&#xff09;并不相同&#xff0c;造成合并后效果不好也…

如何将 HashiCorp Vault 与 Node.js 集成:安全管理敏感数据

在处理密码、API 密钥或个人用户信息等敏感数据时,安全存储它们至关重要。在源代码中硬编码机密或将其保存在纯文本文件中是一种危险的方法。这就是 HashiCorp Vault 发挥作用的地方。 Vault 是一个用于管理机密(例如凭证、API 密钥和敏感配置)的开源工具。 在本教程中,我将…

Vue3 学习笔记(八)Vue3 语法-Class 与 Style绑定详解

在 Vue.js 中&#xff0c;动态地绑定 CSS 类和样式是一项常见的需求。Vue 提供了几种不同的方法来实现这一点&#xff0c;包括对象语法、数组语法和组件的作用域插槽。 以下是这些方法的详细说明&#xff1a; 一、Class 绑定 1、对象语法 对象语法允许根据表达式的真值动态地切…

java知识管理系统源码(springboot)

项目简介 知识管理系统实现了以下功能&#xff1a; 知识管理系统的主要使用者分为管理员和用户两个角色。管理员功能有个人中心&#xff0c;用户管理&#xff0c;文章分类管理&#xff0c;文章信息管理&#xff0c;资料分类管理&#xff0c;资料下载管理&#xff0c;问答管理…

信捷 PLC C语言 定时器在FC中的使用

传统梯形图的定时器程序写起来简单&#xff0c;本文用C语言写定时器的使用。 定时器在c语言中使用&#xff0c;和普通梯形图中使用的区别之一是既有外部条件&#xff0c;也有内部条件。 1.建全局变量 2.建立FC POU 这个是功能POU程序。 这里的Enable是内部条件 3.调用包含定…

从JDK 17 到 JDK 21:Java 新特性

JDK17 密封类 概念&#xff1a;密封类允许开发者控制哪些类可以继承或实现特定的类或接口。通过这种方式&#xff0c;密封类为类的继承提供了更高的安全性和可维护性。 定义&#xff1a;使用sealed代表该类为密封类&#xff0c;并用permits限制哪些类可以继承。 public sea…

重写(外壳不变)

重写&#xff1a;是子类对父类非静态、非private修饰、非final修饰、非构造方法等的实现过程进行重新编写返回值和形参都不能改变。 重写的好处&#xff1a;子类可以根据需要&#xff0c;定义专属于自己的行为。&#xff08;子类能够根据需要实现父类的方法&#xff09; 方法…

大数据日志处理框架ELK方案

介绍应用场景大数据ELK日志框架安装部署 一&#xff0c;介绍 大数据日志处理框架ELK&#xff08;Elasticsearch、Logstash、Kibana&#xff09;是一套完整的日志集中处理方案&#xff0c;以下是对其的详细介绍&#xff1a; 一、Elasticsearch&#xff08;ES&#xff09; 基本…

Golang | Leetcode Golang题解之第515题在每个树行中找最大值

题目&#xff1a; 题解&#xff1a; func largestValues(root *TreeNode) (ans []int) {if root nil {return}q : []*TreeNode{root}for len(q) > 0 {maxVal : math.MinInt32tmp : qq nilfor _, node : range tmp {maxVal max(maxVal, node.Val)if node.Left ! nil {q …

怎么理解ES6 Proxy

Proxy 可以理解成&#xff0c;在目标对象之前架设一层 “拦截”&#xff0c;外界对该对象的访问&#xff0c;都必须先通过这层拦截&#xff0c;因此提供了一种机制&#xff0c;可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理&#xff0c;用在这里表示由它来 “代理…

前端知识串联笔记(更新中...)

1.MVVM MVVM 是指 Model - View - ViewModel&#xff0c;Model 是数据与业务逻辑&#xff0c;View 是视图&#xff0c;ViewModel 用于连接 View 和 Model Model ---> View&#xff1a;将数据转化成所看到的页面&#xff0c;实现的方式&#xff1a;Data Bindings -- 数据绑定…

.NET Core WebApi第6讲:WebApi的前端怎么派人去拿数据?(区别MVC)

一、前端界面小基础 head&#xff1a;引入CSS, 引入JS是写在head里面。 body&#xff1a;眼睛肉眼能看到的用户展示的界面是写在body里面。 二、前端怎么派人去拿数据&#xff1f; 1、MVC&#xff1a;前后端不分离&#xff0c;MVC相比WebApi只是多了一个views的文件夹 &am…

(蓝桥杯C/C++)—— 编程基础

文章目录 一、C基础格式 1.打印hello, world 2.基本数据类型 二、string 1.string简介 2.string的声明和初始化 3.string其他基本操作 (1)获取字符串长度 (2) 拼接字符串( 或 append) (3&#xff09;字符串查找&#xff08;find&#xff09; (4)字符串替换 (5)提取子字符串…

Spring boot 配置文件的加载顺序

Spring Boot 在启动时会扫描以下位置的 application.properties 或者 application.yml 文件作为全局配置文件&#xff1a; –file:./config/–file:./–classpath:/config/–classpath:/以下是按照优先级从高到低的顺序&#xff0c;如下所示&#xff1a; Spring Boot 会全部扫…

分类预测|基于GWO灰狼优化K近邻KNN的数据分类预测Matlab程序 多特征输入多类别输出GWO-KNN

文章目录 一、基本原理原理流程总结 二、实验结果三、核心代码四、代码获取五、总结 一、基本原理 灰狼优化&#xff08;GWO&#xff0c;Grey Wolf Optimization&#xff09;是一种基于灰狼社会行为的优化算法&#xff0c;常用于解决各种优化问题。将GWO应用于K近邻&#xff0…

『完整代码』宠物召唤

创建脚本并编写&#xff1a;PetFollowTarget.cs using UnityEngine; public class PetFollowTarget : MonoBehaviour{Transform target;float speed 2f;Animator animator;void Start(){target GameObject.Find("PlayerNormal/PetsSmallPos").gameObject.transform…