微信小程序uniapp中的图片上传，压缩，预览，删除-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序uniapp中的图片上传，压缩，预览，删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

页面部分

                <view class="vehicleinfo">
					<view class="title"></view>
					<view class="vehiclemain">
						<view class="invoiceoption" v-if="imgUrl == ''">
								<image @click="uploadImg(2)" src="../static/img/i.png" mode=""></image>
						<view class="uploadinfo">请上传</view>
                        <view class="showimg" v-else>
								<image @click="clickImg(imgUrl)" :src="imgUrl" mode="">
								</image>
								<view @click="delclick(2)">x</view>
							</view>
                    </view>
                </view>

1：图片上传

// 上传图片
			uploadImg(type) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (chooseImageRes) => {
						console.log("chooseImageRes.tempFilePaths[0]", chooseImageRes)
						console.log('size', chooseImageRes.tempFiles[0].size / 1024);
						if (this.compress && (chooseImageRes.tempFiles[0].size / 1024 >
								28)) { //设置了需要压缩 并且 文件大于28KB，进行压缩上传
							this.imgCompress(chooseImageRes.tempFilePaths, type);
						} else {
							this.imgUpload(chooseImageRes.tempFilePaths, type);
						}
					}
				});
			},
			imgUpload(tempFilePaths, type) {
				let that = this
				// 请求上传接口
				uni.uploadFile({
					//请求地址可以放在vuex中或者公用js中
					url: prefix + '/sysImg/uploadImg',
					filePath: tempFilePaths[0],
					name: 'multipartFile',
					formData: {
						imgType: type,
					},
					header: {
						"Content-Type": "multipart/form-data",
					},
					success: (uploadFileRes) => {
						uni.showToast({
							title: '正在上传', //显示的文字
							duration: 200, //显示多少时间，默认1500毫秒
							icon: "loading" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						})
						console.log("看看type", type);
						console.log("返回的图片链接", uploadFileRes.data);
						switch (type) {
							case 1:
								that.fileList[0].imgUrl = prefixser + uploadFileRes.data
								break;
							case 2:
								that.fileList[0].imgUrl2 = prefixser + uploadFileRes.data
								break;
							case 3:
								that.fileList[0].imgUrl3 = prefixser + uploadFileRes.data
								break;
							default:
								break;
						}
						console.log("最后的图片链接", that.fileList);
						that.certificationdata.drivingLicenseUrl = that.fileList[0].imgUrl;
						that.certificationdata.carPurchaseInvoiceUrl = that.fileList[0].imgUrl2;
						that.certificationdata.carImgUrl = that.fileList[0].imgUrl3;
					}
				})
			},

2：图片压缩

//图片压缩
			imgCompress(tempFilePaths, type) {
				uni.showLoading({
					title: '压缩中...'
				});
				let compressImgs = [];
				let results = [];
				compressImgs.push(new Promise((resolve, reject) => {
					uni.compressImage({
						src: tempFilePaths[0],
						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, type);
					})
					.catch((res, object) => {
						uni.hideLoading();
					});
			},

3：图片预览

// 预览图片
			clickImg(photoImg) {
				console.log("点击了");
				let imgsArray = [];
				imgsArray[0] = photoImg;
				// 预览图片
				let that = this
				uni.previewImage({
					current: 0,
					urls: imgsArray,
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errmessage);
					// 	}
					// }
				});
			},

4：图片删除

// 删除图片
			delclick(delid) {
				console.log(delid);
				uni.showToast({
					title: '正在删除', //显示的文字
					duration: 200, //显示多少时间，默认1500毫秒
					icon: "loading" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
				})
				switch (delid) {
					case 1:
						this.fileList[0].imgUrl = '';
						this.certificationdata.drivingLicenseUrl = '';
						break;
					case 2:
						this.fileList[0].imgUrl2 = '';
						this.certificationdata.carPurchaseInvoiceUrl = '';
						break;
					case 3:
						this.fileList[0].imgUrl3 = '';
						this.certificationdata.carImgUrl = '';
						break;
					default:
						break;
				}
			},

文章来源地址https://www.toymoban.com/news/detail-502834.html

到了这里，关于微信小程序uniapp中的图片上传，压缩，预览，删除的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！