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

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

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

一、今日學習目標

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

二、實戰(zhàn)步驟

1. 了解uni.chooseImage(OBJECT)

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

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

使用注意事項：

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

2. 了解uni.uploadFile(OBJECT)

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

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

3. 在項目中上傳圖片

// 項目實戰(zhàn)中使用
uni.chooseImage({
					count: 1,  // 圖片數(shù)量
					sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有
					sourceType: ['album', 'camera'], //從相冊選擇或者拍照
					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"
								})
							}
						});
					}
				});

圖片上傳進度監(jiān)聽 uploadTask()

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

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

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