uniapp小程序图片压缩上传

最新推荐文章于 2025-06-10 11:40:01 发布

New个对象.

最新推荐文章于 2025-06-10 11:40:01 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/chb19991118/article/details/120063982

uniapp 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在uniapp中利用API实现拍摄图片后自动压缩，确保不超过4MB限制，提升用户体验。通过授权相机权限，选择图片，调整压缩质量并上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp小程序图片压缩上传

使用uniapp的API操作进行小程序图片压缩上传

代码如下：

<template>
	<view>
		<view  @click="shoot">点击拍摄</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			shoot() {
				uni.authorize({
					sizeType:['original'],
					scope: 'scope.camera',
					success() {
						uni.chooseImage({
							sourceType: ['camera'],
							success(res) {
								let imgmb = 4194304
								let Quality = 60
								if(res.tempFiles[0].size > imgmb){
									Quality = 40
								}
								uni.compressImage({
									src : res.tempFilePaths[0],
									quality : Quality,
									success(res2) {
										console.log(res2.tempFilePath) // 压缩后的
									},
									fail() {
										if(res.tempFiles[0].size > imgmb){
											uni.showToast({
												title:'图片不能大于4MB',
												icon:'none'
											})
											return
										}
										console.log(res.tempFilePaths[0])
									}
								})
							}
						})
					},
					fail() {
						uni.showToast({
							title: '请点击右上角允许获取您的摄像头权限',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>