頁(yè)面部分

                <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">請(qǐng)上傳</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, //默認(rèn)9
					sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
					sourceType: ['camera', 'album'], //這要注意，camera掉拍照，album是打開(kāi)手機(jī)相冊(cè)
					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)) { //設(shè)置了需要壓縮 并且 文件大于28KB，進(jìn)行壓縮上傳
							this.imgCompress(chooseImageRes.tempFilePaths, type);
						} else {
							this.imgUpload(chooseImageRes.tempFilePaths, type);
						}
					}
				});
			},
			imgUpload(tempFilePaths, type) {
				let that = this
				// 請(qǐng)求上傳接口
				uni.uploadFile({
					//請(qǐng)求地址可以放在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, //顯示多少時(shí)間，默認(rèn)1500毫秒
							icon: "loading" //自定義顯示的圖標(biāo)，默認(rèn)成功success，錯(cuò)誤error,加載loading，不顯示圖標(biāo)是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, // 僅對(duì)jpg有效
						success: res => {
							console.log('compressImage', res.tempFilePath)
							results.push(res.tempFilePath);
							resolve(res.tempFilePath);
						},
						fail: (err) => {
							reject(err);
						},
						complete: () => {}
					})
				}))
				//執(zhí)行所有需請(qǐng)求的接口
				Promise.all(compressImgs).then((results) => {
						uni.hideLoading();
						this.imgUpload(results, type);
					})
					.catch((res, object) => {
						uni.hideLoading();
					});
			},

3：圖片預(yù)覽

// 預(yù)覽圖片
			clickImg(photoImg) {
				console.log("點(diǎn)擊了");
				let imgsArray = [];
				imgsArray[0] = photoImg;
				// 預(yù)覽圖片
				let that = this
				uni.previewImage({
					current: 0,
					urls: imgsArray,
					// longPressActions: {
					// 	itemList: ['發(fā)送給朋友', '保存圖片', '收藏'],
					// 	success: function(data) {
					// 		console.log('選中了第' + (data.tapIndex + 1) + '個(gè)按鈕,第' + (data.index + 1) + '張圖片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errmessage);
					// 	}
					// }
				});
			},

4：圖片刪除

// 刪除圖片
			delclick(delid) {
				console.log(delid);
				uni.showToast({
					title: '正在刪除', //顯示的文字
					duration: 200, //顯示多少時(shí)間，默認(rèn)1500毫秒
					icon: "loading" //自定義顯示的圖標(biāo)，默認(rèn)成功success，錯(cuò)誤error,加載loading，不顯示圖標(biāo)是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;
				}
			},

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-502834.html

到了這里，關(guān)于微信小程序uniapp中的圖片上傳，壓縮，預(yù)覽，刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！