uni-app H5上传图片压缩体积大小

           // 用户上传头像
            uploadAvatar(){
                let _this = this
                uni.chooseImage({
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        let filePath = tempFilePaths[0]
                        //#ifdef APP-IOS || APP-ANDROID
                            const theme = uni.getStorageSync('theme');
                            let color = theme == 'purple' ? "#000000" : "#ffffff"
                            let style = theme == 'purple' ? "black" : "white"
                            var styles = {
                                color: color,
                                background: "rgba(0,0,0,0.0)",
                                style: style,
                            }
                            var waiting = plus.nativeUI.showWaiting("上传中...", styles);
                            _this.uploadFile(filePath)
                        //#endif
                        // #ifndef APP-IOS || APP-ANDROID
                            uni.showLoading({
                                title: '上传中...'
                            });
                            _this.afterRead(tempFilePaths)
                        // #endif
                    }
                });
            },
            //压缩
            recursionCompressH5(url) {
              console.log("url",url)
                 return new Promise((resolve, reject) => {
                      this.recursionCompress(url,resolve)
                 })
            },
            // 传入blob路径,.then()获取blob文件
            httpRequest(src) {
                let that = this
                return new Promise((resolve, reject) => {
                  let xhr = new XMLHttpRequest()
                  xhr.open('GET', src, true)
                  xhr.responseType = 'blob'
                  xhr.onload = function (e) {
                      if (this.status == 200) {
                         let myBlob = this.response
                         let files = new window.File(
                            [myBlob],
                            myBlob.type,
                            { type: myBlob.type }
                         ) // myBlob.type 自定义文件名
                            resolve(files)
                         } else {
                            reject(false)
                         }
                      }
                  xhr.send()
                })
            }, 
            recursionCompress(url,resolve) {
                let _this = this
                  uni.getImageInfo({
                      src: url,
                      success(res) {
                          let canvasWidth = res.width; //图片原始长宽
                          let canvasHeight = res.height;
                          let img = new Image();
                        console.log(res,'resinfo')
                          img.src = res.path;
                          let canvas = document.createElement("canvas");
                          let ctx = canvas.getContext("2d");
                          canvas.width = canvasWidth / 2;
                          canvas.height = canvasHeight / 2;
                          ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2);
                          canvas.toBlob(function(fileSrc) {
                              let imgSrc = window.URL.createObjectURL(fileSrc);
                              uni.getFileInfo({
                                  filePath: imgSrc,
                                  success: (resFileInfo) => {
                                      console.log(imgSrc, 'resFileInfo',resFileInfo)
                                      if (resFileInfo.size > 1024 * 1024) {   
                                          //压缩后大于1M就继续压缩
                                        console.log('再次压缩')
                                          _this.recursionCompress(imgSrc,resolve);
                                          // indexObj.recursionCompressH5(imgSrc, callback, item);
                                          return;
                                      } else {
                                          resolve(imgSrc)
                                      }
                                  },
                              });
                          });
                      }
                  });
            },
            afterRead(e) {
              let _this = this
              const file = e
              console.log("e",e)
              // 遍历图片资源
              file.map(item => {
              console.log(item,'item')
              // 进行压缩图片
              this.recursionCompressH5(item).then(url =>{
                  console.log(url,'url')
                  _this.httpRequest(url).then(res => {
                              console.log(res,'成功转换为blob文件');
                            const fileReader = new FileReader()
                              fileReader.readAsDataURL(res) // 读取blob类型的图像文件(不是blob路径),读取成功触发onload方法,并得到result(base64格式的图片)
                              fileReader.onload = (event) => {
                                console.log(fileReader.result,'fileReader.result - base64格式');
                                if (fileReader.result) {
                                    // 上传最终压缩之后的图片
                                    _this.uploadFile(fileReader.result).then(res => {
                                        // uni.hideLoading();
                                        console.log(res)
                                        // this.fileList.push(res)
                                    }).catch(() => {
                                        //#ifdef APP-PLUS
                                        plus.nativeUI.closeWaiting();
                                        //#endif
                                        uni.hideLoading();
                                    })
                                  // 调用wx_uploadImage接口,图片大小必须是1M以下,否则报错
                                  // wx_uploadImage({
                                  //   image: fileReader.result
                                  // }).then(res => {
                                  //   console.log('上传图片成功', res)
                                  //   this.image = res.storage_path
                                  // })
                                }
                              }
                          })
                    })
              })
            },
            uploadFile(path){
                let _this = this
                let url = apiBaseUrl+'mfh/updateHead/'+_this.info.uid
                let token = this.$db.get("userToken");
                const uploadTask = uni.uploadFile({
                    url:url,
                    filePath: path,
                    fileType: 'image',
                    name: 'file',
                    header: {
                        // 'Content-Type': 'multipart/form-data',
                        'Authorization': 'Bearer ' + token
                    },
                    success: (res) => {
                        console.log('完成'+JSON.stringify(res))
                        let data = JSON.parse(res.data);
                        if(data.status){
                            _this.$common.successToShow('头像上传完成')
                            _this.requestUserInfo()
                        }else{
                            if (data.message) {
                                _this.$common.errorToShow(data.message)
                            }
                        }
                    },
                    fail: (error) => {
                        if (error && error.message) {
                            _this.$common.errorToShow(res.message)
                        }
                        //#ifdef APP-PLUS
                        plus.nativeUI.closeWaiting();
                        //#endif
                        uni.hideLoading();
                    },
                    complete: () => {
                        //#ifdef APP-PLUS
                        plus.nativeUI.closeWaiting();
                        //#endif
                        uni.hideLoading();
                    }
                });
            },

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

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

相关文章

Linux\_c输出

第一条Linux_c输出 初界面 : ls # 显示目录下的文件cd # 进入到某个目录 # 比如 我进入了Codels # 发现没有显示, 说明为文件下为空vim cpucdoe.c # 创建一个 .c的源码文件进入到了vim的编辑界面: i # 按i 就可以进行编辑 , 下面显示插入标识在编辑模式下, 可以通…

自定义类如何实现信号与槽机制

如果直接创建一个类&#xff0c;他是没有信号与槽机制的&#xff0c;我们需要人为的干预才可以 #ifndef TCPSERVER_H #define TCPSERVER_H#include <QTcpServer>class TcpServer : public QTcpServer {public:TcpServer(); };#endif // TCPSERVER_H在头文件里面加入Q_O…

云计算导论(1)---云计算概述

文章目录 1. 云计算定义与特点2. 云计算的技术架构3. 云计算面临的挑战 1. 云计算定义与特点 1. 云是网络、互联网的一种比喻说法。云计算是基于互联网的相关服务的增加、使用和交付模式&#xff0c;通常涉及通过互联网来提供动态易扩展且经常是虚拟化的资源。 2. 云计算是一种…

Java性能优化(五)-多线程调优-Lock同步锁的优化

作者主页&#xff1a; &#x1f517;进朱者赤的博客 精选专栏&#xff1a;&#x1f517;经典算法 作者简介&#xff1a;阿里非典型程序员一枚 &#xff0c;记录在大厂的打怪升级之路。 一起学习Java、大数据、数据结构算法&#xff08;公众号同名&#xff09; ❤️觉得文章还…

Android getevent命令详细分析

在调试Android 的输入事件时&#xff0c;经常使用 “getevent -lrt” 命令&#xff0c;来确认驱动上报数据是否正常。从源码的角度来详细的分析一下getevent 这个程序。 首先用ls命令来看一下getevent lrwxr-xr-x 1 root shell 7 2023-11-20 10:08 system/bin/getevent -> …

独有病眼花,春风吹不落。 (二维坐标压缩成一个点,并查集)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 3 8 1 1 D 1 1 R 1 2 D 2 1 D 2 2 R 3 1 R 3 2 R 2 3 D 输出 8 思路&#xff1a; 根据题意&#xff0c;要求连接线段后&#xff0c;操作多少次&#xff0c;连接的线段闭合&…

cmake install命令无法覆盖同名文件

文章目录 1. 问题记录2. 原因排查3. 解决方案 1. 问题记录 我有两个同名文件test.txt&#xff0c;它们内容不同&#xff0c;但时间戳相同&#xff08;文件属性中的修改时间相同&#xff09; 我希望在cmake中利用install命令&#xff0c;将${PATH_SRC}/test.txt替换${PATH_DES…

智能网联汽车网络和数据安全态势分析

文章目录 前言一、我国智能网联汽车安全态势分析(一)我国高度重视智能网联汽车安全发展(二)产业高速发展伴随网络安全隐患(三)网络和数据安全风险事件威胁加剧二、智能网联汽车网络和数据安全典型实践剖析(一)立标准规范,把牢安全发展“方向盘”(二)强车主服务,系好…

数据库系统理论——绪论

文章目录 前言一、数据库四个基本概念1、数据2、数据库3、数据库管理系统&#xff08;DBMS&#xff09;4、数据库系统&#xff08;DBS&#xff09; 二、数据模型1、概念数据模型2、逻辑数据模型3、物理数据模型 三、三级模式1、图片解析2、二级映像 前言 最近很长时间没更新学…

上海个人购房提取公积金经历和注意事项(收藏不踩坑)

在前一篇文章中&#xff0c;我介绍了 2024 年 4 月 24 日上海个人购房个税退税经历&#xff0c;我于 4 月 27 日周六&#xff0c;顺利办理租房公积金提取业务&#xff0c;资金在业务办理完成后 10 分钟左右到账。通过本文分享办理过程的材料和注意事项&#xff0c;避免大家踩坑…

基于Springboot的教学资源共享平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的教学资源共享平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

博睿数据将出席ClickHouse Hangzhou User Group第1届 Meetup

2024年5月18日&#xff0c;博睿数据数智能力中心负责人李骅宸将受邀参加ClickHouse Hangzhou User Group第1届 Meetup活动&#xff0c;分享《ClickHouse在可观测性的应用实践和优化》的主题演讲。 在当前数字化浪潮下&#xff0c;数据的规模和复杂性不断攀升&#xff0c;如何高…

Dockerfile 和 Docker Compose

Dockerfile 和 Docker Compose 是 Docker 生态系统中两个重要的组成部分&#xff0c;它们分别服务于不同的目的&#xff0c;但共同协助开发者和运维人员高效地管理和部署容器化应用。 Dockerfile Dockerfile 是一个文本文件&#xff0c;包含了构建 Docker 镜像所需的一系列指…

Python读取ASC文件并转换成Excel文件(坐标)

import pandas as pd# 读取asc文件&#xff0c;指定空格为分隔符 df pd.read_csv(out_view2.asc, sep , headerNone)# 去掉空列 df df.dropna(howall, axis1)# 将数据保存到Excel文件 df.to_excel(out_view2.xlsx, indexFalse, headerFalse)效果图

Python Dash库:一个Web应用只需几行代码

大家好&#xff0c;在数据科学领域&#xff0c;数据可视化是将数据以图形化形式展示出来&#xff0c;帮助我们更直观地理解数据。Python中有一个非常流行的数据可视化库叫做Dash&#xff0c;Dash以其简洁、高效和强大的功能而闻名&#xff0c;它允许开发者快速构建交互式Web应用…

C++多态有几种实现方式

1、重载&#xff1a;通过函数名相同但参数不同的多个函数实现不同行为。在编译时通过参数类型决定调用哪个函数。 2、重写&#xff1a;通过继承让派生类重新实现基类的虚函数。在运行时通过指针/引用的实际类型调用对应的函数。 3、编译时多态&#xff1a;通过模板和泛型实现…

Python实现简单的Web服务器

Python实现简单的Web服务器 一、课程介绍 2. 内容简介 互联网在过去20年里已经大大地改变了我们的生活方式&#xff0c;影响着社会。但是反观互联网&#xff0c;它的基础&#xff0d;web的核心原理并没有改变多少。大部分web系统仍旧遵守 Tim Berners-Lee 20 多年前提出的 W…

python基础--修饰器

修饰器(语法糖) 在python中函数实际上就是一个对象 def outer(x):def inner(y):return x yreturn innerprint(outer(6)(5))def double(x):return x * 2 def triple(x):return x * 3def calc_number(func, x):print(func(x))calc_number(double, 3) calc_number(triple, 3)函…

鸿蒙内核源码分析(中断管理篇) | 江湖从此不再怕中断

关于中断部分系列篇将用三篇详细说明整个过程. 中断概念篇 中断概念很多&#xff0c;比如中断控制器&#xff0c;中断源&#xff0c;中断向量&#xff0c;中断共享&#xff0c;中断处理程序等等.本篇做一次整理.先了解透概念才好理解中断过程.用海公公打比方说明白中断各个概念…

一堆自定义C#代码片段,让你开发效率飞涨

SharpBoxes 是一款用于 Visual Studio 的扩展&#xff0c;作者为本人&#xff1b; 该扩展旨在提高开发效率。它为开发人员提供了一组日常使用频率较高的代码片段&#xff0c;让你在编写代码时能够更快地插入常用的代码段。通过安装这个扩展&#xff0c;你可以使用快捷键轻松插…