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

超、凢脫俗 2023-01-20 10:56 446阅读 0赞

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

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

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

实现效果是如下图：

![20210513105533819.png][]

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

### 整体上传思路 ###

整体上传思路有：

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>

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

[- uni-app_ _dcloud.io]: https://uniapp.dcloud.io/api/media/image
[20210513105533819.png]: /images/20221021/98f71b50640b4039a4732693a0ad2b1f.png