快捷導(dǎo)航

uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟

更新時(shí)間：2022年12月09日 11:28:05 作者：彭式程序猿

應(yīng)用uni-app開(kāi)發(fā)跨平臺(tái)App項(xiàng)目時(shí),上傳圖片、文檔等資源功能需求十分常見(jiàn),下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下

一、今日學(xué)習(xí)目標(biāo)

實(shí)現(xiàn)uniapp上傳圖片

二、實(shí)戰(zhàn)步驟

1. 了解uni.chooseImage(OBJECT)

特別說(shuō)明下crop參數(shù)，是圖像裁剪的參數(shù)

// uni.chooseImage() 基本示例
uni.chooseImage({
	count: 6, //默認(rèn)9
	sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
	sourceType: ['album'], //從相冊(cè)選擇
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

使用注意事項(xiàng)：

count 值在 H5 平臺(tái)的表現(xiàn)，基于瀏覽器本身的規(guī)范。目前測(cè)試的結(jié)果來(lái)看，只能限制單選/多選，并不能限制數(shù)量。并且，在實(shí)際的手機(jī)瀏覽器很少有能夠支持多選的。
sourceType 值在 H5 平臺(tái)根據(jù)瀏覽器的不同而表現(xiàn)不同，一般不可限制僅使用相冊(cè)，部分瀏覽器也無(wú)法限制是否使用相機(jī)。

2. 了解uni.uploadFile(OBJECT)

介紹：將本地資源上傳到開(kāi)發(fā)者服務(wù)器，客戶端發(fā)起一個(gè) POST 請(qǐng)求，其中 content-type 為 multipart/form-data

// 示例代碼
uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //僅為示例，非真實(shí)的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

3. 在項(xiàng)目中上傳圖片

// 項(xiàng)目實(shí)戰(zhàn)中使用
uni.chooseImage({
					count: 1,  // 圖片數(shù)量
					sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
					sourceType: ['album', 'camera'], //從相冊(cè)選擇或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0])
						_this.logo_list = tempFilePaths[0]
						uni.uploadFile({
							url: 'https://xx.com/center/group/icon', //上傳圖片api
							filePath: tempFilePaths[0],
							name: 'groupicon',
							header:{
								"Authorization": userinfo.token
							},
							success: (res) => {
								let group =  JSON.parse(res.data) 
								uni.showToast({
									title:"上傳成功",
									icon:"success"
								})
							}
						});
					}
				});

圖片上傳進(jìn)度監(jiān)聽(tīng) uploadTask()

在uniapp中上傳圖片，需要uni.chooseImage()和uni.uploadFile()這兩個(gè)api結(jié)合使用，才能完成圖片的上傳，還有一個(gè)uploadTask(),可以用來(lái)監(jiān)聽(tīng)上傳進(jìn)度變化事件，和取消上傳任務(wù)。我們根據(jù)項(xiàng)目需求去決定要不要添加這個(gè)監(jiān)聽(tīng)行為。

// 示例
uploadTask.onProgressUpdate((res) => {
			console.log('上傳進(jìn)度' + res.progress);
			console.log('已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度' + res.totalBytesSent);
			console.log('預(yù)期需要上傳的數(shù)據(jù)總長(zhǎng)度' + res.totalBytesExpectedToSend);

			// 測(cè)試條件，取消上傳任務(wù)。
			if (res.progress > 50) {
				uploadTask.abort();
			}
		});