安装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);},});});},