uniapp上传图片到服务器前压缩

文章介绍了在H5开发中,如何使用UniApp的API进行图片选择,检测文件大小,以及当文件超过限制时进行图片压缩,确保上传不超过200KB的示例代码。
摘要由CSDN通过智能技术生成

直接上代码:

选择图片

chooseAvatar(){
	uni.chooseImage({
		count:1,
		success: (res) => {
			this.handleUpload(res.tempFilePaths[0])
		}
	})
},

获取文件大小的方法

getFileSize(filePath) {
	return new Promise((resolve, reject) => {
		uni.getFileInfo({
			filePath: filePath,
			success: function(res) {
				const fileSize = res.size;
				resolve(fileSize);
			},
			fail: function(err) {
				reject(err);
			}
		});
	});
},

压缩文件

export default function compressPhoto(imagePath) {
  const maxSize = 200 * 1024; // 设置最大文件大小为 200KB
  const step = 10; // 每次迭代减少的压缩质量值
  let quality = 80; // 初始压缩质量为80

  return new Promise((resolve, reject) => {
    function compress() {
      uni.compressImage({
        src: imagePath,
        quality: quality,
        success: function(res) {
          const compressedImagePath = res.tempFilePath;

          uni.getFileInfo({
            filePath: compressedImagePath,
            success: function(res) {
              const fileSize = res.size;

              if (fileSize <= maxSize || quality <= 0) {
                // 图片大小符合要求,返回压缩后的图片路径
                resolve(compressedImagePath);
              } else {
                // 继续迭代压缩图片大小
                quality -= step;
                retry();
              }
            },
            fail: function(err) {
              // 获取文件信息失败,返回错误信息
              reject(err);
            }
          });
        },
        fail: function(err) {
          // 压缩图片失败,返回错误信息
          reject(err);
        }
      });
    }

    function retry() {
      if (quality > 0) {
        compress();
      } else {
        reject(new Error('压缩图片失败'));
      }
    }

    retry();
  });
}

执行

async handleUpload(imagePath) {
			try{
				const maxSize = 200 * 1024; // 设置最大文件大小为 200KB
				const fileSize = await this.getFileSize(imagePath);
				if (fileSize > maxSize) {
					console.log('已超出最大200kb限制,正在压缩中....');
					const compressedImagePath = await compressPhoto(imagePath);
					await this.uploadImage(compressedImagePath); // 调用上传图片的方法,传入压缩后的图片路径
				} else {
					console.log('未超出最大200kb限制,正常上传中....');
					await this.uploadImage(imagePath); // 调用上传图片的方法,传入原始图片路径
				}
			}catch(error){
				console.log('图片处理或上传失败', error);
			}
		},
uploadImage为你上传到服务器的方法,自己写吧,compressedImagePath是压缩过的url
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值