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

推薦：《uniapp教程》

一、前言

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

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

二、項(xiàng)目實(shí)戰(zhàn)

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

對(duì)于門戶提到的

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

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

項(xiàng)目實(shí)現(xiàn)頁面大致邏輯如下，完整頁面實(shí)現(xiàn)邏輯可移步《Uni-app 實(shí)現(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'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有 		sourceType: ['album', 'camera'], //從相冊(cè)、相機(jī)選擇 		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請(qǐng)求地址 			    filePath: tempFilePaths, 			    name: 'file',  // 待確認(rèn) 			    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: '確定要?jiǎng)h除照片嗎？', 		cancelText: '取消', 		confirmText: '確定', 		success: res => { 			if(res.confirm) { 				imgList.splice(i, 1); 				imgsID.splice(i, 1); 				this.curTotal--; 			} 		} 	})}}

JS邏輯層-圖片壓縮

// src: 壓縮轉(zhuǎn)換原始圖片的路徑// _this: 當(dāng)前的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; 		});}

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

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

上傳3張圖片/刪除圖片

三、知識(shí)點(diǎn)總結(jié)

3.1 實(shí)現(xiàn)原理

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

3.2 注意事項(xiàng)

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

• 圖片上傳應(yīng)用uni.uploadFile()實(shí)現(xiàn)，上傳成功后回調(diào)函數(shù)返回的uploadFileRes.data是個(gè)String類型，轉(zhuǎn)對(duì)象的時(shí)候需要應(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屬性為待上傳文件對(duì)應(yīng)的 key , 開發(fā)者在服務(wù)器端通過這個(gè) key 可以獲取到文件二進(jìn)制內(nèi)容，前后端對(duì)于該key應(yīng)保持一致，否則會(huì)導(dǎo)致服務(wù)無法請(qǐng)求。
  

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

推薦：《uniapp學(xué)習(xí)教程》