本篇文章給大家?guī)砹岁P(guān)于uniapp的相關(guān)知識，主要包括了怎樣實現(xiàn)上傳圖片的相關(guān)問題，下面就一起來看一下應(yīng)該怎樣實現(xiàn)，希望對大家有幫助。

推薦：《uniapp教程》

一、前言

應(yīng)用uni-app開發(fā)跨平臺App項目時，上傳圖片、文檔等資源功能需求十分常見：點擊相框按鈕可選擇圖片上傳，點擊每一個圖片可以進行預(yù)覽，點擊每個圖片刪除圖標可刪除對應(yīng)圖片?；緦崿F(xiàn)功能點如下：

• 本地相冊選擇圖片或使用相機拍照上傳圖片；
• 可以預(yù)覽選擇上傳的圖片；
• 刪除選錯或不選的圖片；

二、項目實戰(zhàn)

經(jīng)過研讀uni-app門戶，官網(wǎng)推薦應(yīng)用uni.chooseImage(OBJECT)接口從本地相冊選擇圖片或使用相機拍照。

對于門戶提到的

選擇照片大多為了上傳，uni ui封裝了更完善的uni-file-picker組件，文件選擇、上傳到uniCloud的免費存儲和cdn中，一站式集成。強烈推薦使用。

本人并不認可，經(jīng)過實踐可知，該接口只能實現(xiàn)客戶端將圖片資源上傳到uniCloud后臺服務(wù)器中，并不支持本地服務(wù)器，故并不滿足功能需求，需謹慎使用。

項目實現(xiàn)頁面大致邏輯如下，完整頁面實現(xiàn)邏輯可移步《Uni-app 實現(xiàn)圖片上傳、刪除、預(yù)覽、壓縮》下載。

視圖渲染

<template> 	<view class="center"> 		<!-- 上傳圖片 --> 		<view class="uploadClass"> 			<view class="imgClass" v-for="(item, i) in imgList" :key='i' @click="viewImage(i, imgList)"> 				<image style="width: 100%;height: 100%;" :src="item"></image> 				<view @click.stop="delImg(i, imgList, imgsID)" style="display: inline;"> 					<uni-icons type="closeempty" class="closeClass" size="20"></uni-icons> 				</view> 			</view> 			<view v-show='curTotal < 3' class="cameraClass" @tap="upload"> 				<image style="width: 48rpx; height: 38rpx;" src="@/static/appCenter/zhaoxiangji@2x.png"></image> 			</view> 			<!-- 圖片數(shù)量提示 --> 			<view class="totalClass">{{curTotal}}/3</view> 		</view></template>

JS邏輯層-圖片上傳

// 圖片選擇上傳upload() { 	var _self = this; 	// 圖片選擇，只支持一次選擇一張圖片 	uni.chooseImage({ 		count: 1, 		sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有 		sourceType: ['album', 'camera'], //從相冊、相機選擇 		success: function (res) { 			console.log('res:', res) 			_self.curTotal++; 			_self.imgList.push(res.tempFilePaths[0]); 			const tempFilePaths = res.tempFilePaths[0]; 			// 圖片上傳 			const uploadTask = uni.uploadFile({ 				url : 'http://22.189.25.91:9988/admin/sys-file/upload', // post請求地址 			    filePath: tempFilePaths, 			    name: 'file',  // 待確認 			    header: { 					'Content-Type': 'multipart/form-data', 					'Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA==' 				}, 				success: function (uploadFileRes) { 					console.log('Success:', uploadFileRes); 					_self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId); 					console.log('_self.imgsID:', _self.imgsID) 				}, 				fail: function (uploadFileFail) { 					console.log('Error:', uploadFileFail.data); 				}, 				complete: ()=> { 					console.log('Complete:'); 				} 			}); 		}, 		error : function(e){ 			console.log(e); 		}    });}

JS邏輯層-圖片預(yù)覽

/**  * 圖片預(yù)覽  * @param {Object} i 選擇的圖片索引  * @param {Object} imgList 自行封裝的圖片數(shù)組  */viewImage(i, imgList) { 	let imgurl = [] 	imgList.forEach(item => imgurl.push(item)) 	uni.previewImage({ 		urls: imgurl, 		current: imgList[i] 	});}

JS邏輯層-圖片刪除

/** 圖片刪除  * @param {Object} i 刪除圖片的索引  * @param {Object} imgList 自行封裝的圖片數(shù)組  */delImg(i, imgList, imgsID) { 	uni.showModal({ 		title: '提示', 		content: '確定要刪除照片嗎？', 		cancelText: '取消', 		confirmText: '確定', 		success: res => { 			if(res.confirm) { 				imgList.splice(i, 1); 				imgsID.splice(i, 1); 				this.curTotal--; 			} 		} 	})}}

JS邏輯層-圖片壓縮

// src: 壓縮轉(zhuǎn)換原始圖片的路徑// _this: 當前的this，如果不想傳遞this可將該函數(shù)改為箭頭函數(shù)// callback: 回調(diào)函數(shù)，詳情chooseImage方法function compressImage(src, _this, callback) { 	var dstname = "_doc/IMG-" + (new Date()).valueOf() + ".jpg"; //設(shè)置壓縮后圖片的路徑  	var width, height, quality; 	width = "80%"; 	height = "80%"; 	quality = 80; 	// 具體情況可查看HTML5+文檔 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage 	plus.zip.compressImage({ 			src: src, 			dst: dstname, 			overwrite: true, 			quality: quality, 			width: width, 			height: height		}, 		function(event) { 			callback(event.target, dstname, _this); 		}, 		function(error) { 			return src; 		});}

注意：在圖片上傳之前進行圖片壓縮，由于圖片壓縮時間過長，應(yīng)采用await上傳圖片之前先壓縮，否則上傳會比壓縮先執(zhí)行。

應(yīng)用實現(xiàn)效果如下：
拍照或從相冊選擇圖片/上傳一張圖片

上傳3張圖片/刪除圖片

三、知識點總結(jié)

3.1 實現(xiàn)原理

客戶端通過uni.chooseImage()方法選擇本地相冊圖片或者拍照，獲取到一個本地資源的臨時文件路徑后，然后以 POST 請求方式通過uni.uploadFile()方法將本地資源上傳到開發(fā)者服務(wù)器，POST 請求中 content-type 為 multipart/form-data。

3.2 注意事項

• 圖片選擇應(yīng)用uni.chooseImage()實現(xiàn)，請謹慎使用uni ui封裝的所謂更完善的uni-file-picker組件，其將資源文件選擇、上傳到uniCloud的免費存儲和cdn中，一站式集成，個人無法修改。強烈推薦不使用！

• 圖片上傳應(yīng)用uni.uploadFile()實現(xiàn)，上傳成功后回調(diào)函數(shù)返回的uploadFileRes.data是個String類型，轉(zhuǎn)對象的時候需要應(yīng)用JSON.parse()解析。

  JSON.parse(uploadFileRes.data).data.fileId)

  { 	"data": "{"code":0,"msg":null,"data":{"bucketName":"cicc","fileName":"5aaa39d669224ffb869b60d245b0751a.jpg","original":"1644999553865_mmexport1644913914292.jpg","url":"/admin/sys-file/cicc/5aaa39d669224ffb869b60d245b0751a.jpg","fileId":"172"}}", 	"statusCode": 200, 	"errMsg": "uploadFile:ok"}

• uni.uploadFile() OBJECT 參數(shù)說明部分中name屬性為待上傳文件對應(yīng)的 key , 開發(fā)者在服務(wù)器端通過這個 key 可以獲取到文件二進制內(nèi)容，前后端對于該key應(yīng)保持一致，否則會導(dǎo)致服務(wù)無法請求。
  

• 圖片預(yù)覽應(yīng)用uni.previewImage()實現(xiàn)，沒遇到坑，大家可根據(jù)需求按照門戶參數(shù)使用。

推薦：《uniapp學習教程》