基于uniapp开发的微信H5图片上传压缩

embedded/2024/11/23 17:56:25/

安装Compressor,并在页面引入

npm i compressorjs
	import Compressor from "compressorjs"

具体使用代码

H5部分:

<view class="h5upload" @click="add"><view class="">+</view><view class="">上传图片</view></view>

js部分:

//选择图片async add() {const input = document.createElement('input');input.type = 'file';input.accept = 'image/*';input.multiple = true;input.onchange = async (event) => {const files = Array.from(event.target.files);let arr = [];let promiseArr = [];uni.showLoading({title: "上传中"});for (const file of files) {try {const compressedBlob = await this.compressImage(file);console.log("图片压缩后", compressedBlob);// 将 Blob 转换为 File 对象const fileName = file.name; // 保持原文件名const fileType = compressedBlob.type; // 获取 Blob 类型const fileToUpload = new File([compressedBlob], fileName, {type: fileType});// 使用 FormData 来上传文件const formData = new FormData();formData.append('file', fileToUpload);formData.append('user', 'test');promiseArr.push(fetch(`${IMG_BASE_URL}/photo_album`, {method: 'POST',body: formData,}).then(response => {if (!response.ok) {throw new Error(`网络错误: ${response.status}`);}return response.json();}).then(data => {console.log("上传响应数据:", data);return data?.data?.path || "";}).catch(error => {console.error("上传失败", error);throw error;}));} catch (error) {console.error("压缩失败", error);}}const results = await Promise.all(promiseArr);console.log("上传图片数组", results);uni.hideLoading();this.fileList = [...this.fileList, ...results]};input.click();},//压缩compressImage(file) {return new Promise((resolve, reject) => {new Compressor(file, {quality: 0.7,//压缩等级success(result) {resolve(result);},error(err) {reject(err);},});});},


http://www.ppmy.cn/embedded/139904.html

相关文章

如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!

在 React 项目中应用 TypeScript 是提升开发效率、增强代码可维护性和可读性的好方法。TypeScript 提供了静态类型检查、自动补全和代码提示等功能&#xff0c;这对于 React 开发者来说&#xff0c;能够帮助早期发现潜在的 bug&#xff0c;提高开发体验。 1. 项目初始化 在现…

排序算法(四)--快速排序

文章目录 引言快速排序的基本原理C语言实现快速排序代码解析 快速排序 C语言实例 引言 快速排序&#xff08;Quicksort&#xff09;作为一种高效的排序算法&#xff0c;以其平均时间复杂度为O(n log n)而著称。 快速排序的基本原理 快速排序的核心思想是分治法&#xff08;D…

一站式学习:害虫识别与分类图像分割

1.背景意义 研究背景与意义 随着全球气候变化和人类活动的加剧&#xff0c;害虫的种类和数量不断增加&#xff0c;给农业、生态环境和公共卫生带来了严重威胁。害虫不仅会直接损害农作物&#xff0c;导致经济损失&#xff0c;还可能传播疾病&#xff0c;影响人类健康。因此&a…

20241121 android中树结构列表(使用recyclerView实现)

1、adapter-item的布局 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"wrap_content&…

30. 并发编程

一、什么是多任务 如果一个操作系统上同时运行了多个程序&#xff0c;那么称这个操作系统就是 多任务的操作系统&#xff0c;例如&#xff1a;Windows、Mac、Android、IOS、Harmony 等。如果是一个程序&#xff0c;它可以同时执行多个事情&#xff0c;那么就称为 多任务的程序。…

react中Fragment的使用场景

在 React 中&#xff0c;Fragment 是一个非常有用的组件&#xff0c;允许你将多个子元素包裹在一起&#xff0c;而不会在 DOM 中产生额外的节点。它通常用于以下几个场景&#xff1a; import React, {Fragment} from react; 1. 返回多个子元素而不添加额外的 DOM 元素&#x…

MVC 模型:架构与原理

MVC 模型:架构与原理 MVC(Model-View-Controller)模型是一种广泛应用于软件工程的架构模式,主要用于分离应用程序的逻辑层,以提高其可维护性和可扩展性。MVC模型将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。本文将深入探讨MVC模型的…

RTC QoS方法十三.(ReedSolomonFEC简介)

一、FlexFEC恢复的困局 在使用FlexFEC进行冗余的时候&#xff0c;经验值需要冗余5倍的丢包率&#xff0c;才能有比较高的恢复率。 Flex FEC在2D数组异或时能获得比较高的恢复率&#xff0c;但是如上图所示&#xff0c;25个包发送10个FEC包&#xff0c;成本为10/2540%的冗余度。…