uni-app小程序实现图片上传和压缩

这个上传全部是uni-app的东西，官网 图片 - uni-app官网 (dcloud.io)  需要的关于图片的api均在文件内

在开发的时候建议优先查看官网

具体实现的 图片选择、压缩及上传

实现效果是如下图：

实现的操作是没图片时展示选择图片的按钮，图片展示图片并可以删除

整体上传思路

整体上传思路有：

1. 选择图片    wx.chooseImage({})
2. 选择后拿到路径进行压缩      uni.compressImage({})
3. 挨个上传图片           uni.uploadFile({})    
4. 图片预览 （均在代码内实现）          

这边是有后端动态显示的东西，没有删掉请自行修改

图片上传的全部代码

<template>
	<view class="page quenaire">
		<view class="question-box">
			<view class="htz-image-upload-list">
                <view class="htz-image-upload-Item" v-for="(item,index) in imageLists" :key="index">
                    <image :src="item" @click="imgPreview(index)"></image>
                    <view class="htz-image-upload-Item-del" @click="imgDel(index)">×</view>
                </view>
                <view  class="htz-image-upload-Item htz-image-upload-Item-add" @click="imgAdd">+</view>
            </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceData: [],
				question: {},
				imageContent: '',
				compress: true,
				imageLists : [],
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				imageArr: [],
			}
		},
		computed: {
			baseUrl() {
				return 'https://xxx'
			},
			imageLength(){
				return this.imageLists.length
			},
			imageOtherLength(){
				return this.imageOtherLists.length
			},
			sourceTypeList(){
				if(this.question.liveShooting){   // 可以现场拍摄
					return ['camera']
				}else{
					return ['album', 'camera']
				}
			},
		},
		methods: {
			imgPreview(index) {
				uni.previewImage({
					urls: this.imageLists,
					current: index,
					loop: true,
				});
			},
			imgAdd() {
                // 选择图片
				wx.chooseImage({
					count: this.fileNum,  // 自定义数据
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sizeType: 'original',   // 直接写固定值 原图 上方是显示两个，底下是一个
					sourceType: this.sourceTypeList,   // 动态显示
					success: (res) => {
						console.log('tempFiles', res)
						console.log('size', res.tempFiles[0].size/1024/1024);
						if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
							this.imgCompress(res.tempFilePaths);
						} else {
							this.imgUpload(res.tempFilePaths);
						}
					}
				});
			},
            // 图片上传
			imgUpload(tempFilePaths) {
				uni.showLoading({
					title: '上传中'
				});
				console.log('tempFilePaths',tempFilePaths)
				let uploadImgs = [];
				tempFilePaths.forEach((item, index) => {
					uploadImgs.push(new Promise((resolve, reject) => {
						const uploadTask = uni.uploadFile({
							url: this.baseUrl, //仅为示例，非真实的接口地址
							method:"POST",
							filePath: item,
							name: 'file',
							fileType: 'image',
							// formData: this.formData,
							// header: this.headers,
							success: (uploadFileRes) => {
								console.log("uploadFileRes",uploadFileRes);
								resolve(uploadFileRes);
							},
							fail: (err) => {
								console.log(err);
								reject(err);
							},
							complete: () => {
							}
						});
					}))
				})
				Promise.all(uploadImgs) //执行所有需请求的接口
					.then((results) => {
						uni.hideLoading();
					})
					.catch((res, object) => {
						uni.hideLoading();
					});
			},
            //图片压缩
			imgCompress(tempFilePaths) {
				uni.showLoading({
					title: '压缩中...'
				});
				let compressImgs = [];
				let results = [];
				tempFilePaths.forEach((item, index) => {
					console.log('item', item)
					compressImgs.push(new Promise((resolve, reject) => {
						uni.compressImage({
							src: item,
							quality: 60,    // 仅对jpg有效
							success: res => {
								console.log('compressImage', res.tempFilePath)
								results.push(res.tempFilePath);
								resolve(res.tempFilePath);
							},
							fail: (err) => {
								reject(err);
							},
							complete: () => {
							}
						})
					}))
				})
				Promise.all(compressImgs) //执行所有需请求的接口
					.then((results) => {
						uni.hideLoading();
						this.imgUpload(results);
					})
					.catch((res, object) => {
						uni.hideLoading();
					});
			},
			imgDel(index) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除么?',
					success: (res) => {
						if (res.confirm) {
							this.imageLists.splice(index, 1)
							console.log("this.imageLists",this.imageLists)
						} else if (res.cancel) {}
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	.page{
		background-image: linear-gradient(#0063FF, #009CFF);
	}
	.quenaire{
		padding: 0 30rpx;
		.htz-image-upload-list {
			display: flex;
			flex-wrap: wrap;
		}
		.htz-image-upload-Item {
			width: 160rpx;
			height: 160rpx;
			margin: 13rpx;
			border-radius: 10rpx;
			position: relative;
		}
		.htz-image-upload-Item image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		.htz-image-upload-Item-add {
			font-size: 105rpx;
			text-align: center;
			border: 1px dashed #d9d9d9;
			color: #d9d9d9;
		}
		.htz-image-upload-Item-del {
			background-color: #B9B9B9;
			font-size: 24rpx;
			position: absolute;
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			top: 0;
			right: 0;
			z-index: 100;
			color: #fff;
		}
	}
</style>

整体是这么多，有什么问题欢迎留言！！！