欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp小程序上傳圖片功能的實現(xiàn)

 更新時間:2023年01月10日 11:28:58   作者:不苒  
本篇文章我們研究一下,在移動端開發(fā)過程中經(jīng)常使用到的圖片上傳功能,在大多數(shù)小程序或者APP中都會遇到一些實名認證或者頭像上傳的功能,對uniapp小程序?上傳圖片功能感興趣的朋友跟隨小編一起看看吧

??前言

本篇文章我們研究一下,在移動端開發(fā)過程中經(jīng)常使用到的圖片上傳功能。在大多數(shù)小程序或者APP中都會遇到一些實名認證或者頭像上傳的功能。uniapp官方也提供了相應的API供我們使用。
官網(wǎng)地址:uni.chooseImage(OBJECT)

??正文

1、首先看官網(wǎng)

uni.chooseImage(OBJECT) API 介紹

從本地相冊選擇圖片或使用相機拍照。

App端如需要更豐富的相機拍照API(如直接調(diào)用前置攝像頭),參考plus.camera

微信小程序從基礎庫 2.21.0 開始, wx.chooseImage 停止維護,請使用 uni.chooseMedia 代替。

OBJECT 參數(shù)說明

參數(shù)名類型必填說明平臺差異說明
countNumber最多可以選擇的圖片張數(shù),默認9見下方說明
sizeTypeArrayoriginal 原圖,compressed 壓縮圖,默認二者都有App、微信小程序、支付寶小程序、百度小程序
extensionArray根據(jù)文件拓展名過濾,每一項都不能是空字符串。默認不過濾。H5(HBuilder X2.9.9+)
sourceTypeArrayalbum 從相冊選圖,camera 使用相機,默認二者都有。如需直接開相機或直接選相冊,請只使用一個選項
cropObject圖像裁剪參數(shù),設置后 sizeType 失效App 3.1.19+
successFunction成功則返回圖片的本地文件路徑列表 tempFilePaths
failFunction接口調(diào)用失敗的回調(diào)函數(shù)小程序、App
completeFunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

crop 參數(shù)說明

參數(shù)名類型必填說明平臺差異說明
qualityNumber取值范圍為1-100,數(shù)值越小,質(zhì)量越低(僅對jpg格式有效)。默認值為80。
widthNumber裁剪的寬度,單位為px,用于計算裁剪寬高比。
heightNumber裁剪的高度,單位為px,用于計算裁剪寬高比。
resizeBoolean是否將width和height作為裁剪保存圖片真實的像素值。默認值為true。注:設置為false時在裁剪編輯界面顯示圖片的像素值,設置為true時不顯示

Tips

  • count 值在 H5 平臺的表現(xiàn),基于瀏覽器本身的規(guī)范。目前測試的結(jié)果來看,只能限制單選/多選,并不能限制數(shù)量。并且,在實際的手機瀏覽器很少有能夠支持多選的。
  • sourceType 值在 H5 平臺根據(jù)瀏覽器的不同而表現(xiàn)不同,一般不可限制僅使用相冊,部分瀏覽器也無法限制是否使用相機。
  • 可以通過用戶授權(quán)API來判斷用戶是否給應用授予相冊或攝像頭的訪問權(quán)限https://uniapp.dcloud.io/api/other/authorize`
  • App端如需選擇非媒體文件,可在插件市場搜索文件選擇,其中Android端可以使用Native.js,無需原生插件,而iOS端需要原生插件。
  • 選擇照片大多為了上傳,uni ui封裝了更完善的uni-file-picker組件,文件選擇、上傳到uniCloud的免費存儲和cdn中,一站式集成。強烈推薦使用。

注:文件的臨時路徑,在應用本次啟動期間可以正常使用,如需持久保存,需在主動調(diào)用 uni.saveFile,在應用下次啟動時才能訪問得到。

success 返回參數(shù)說明

數(shù)類型說明
tempFilePathsArray圖片的本地文件路徑列表
tempFilesArray、Array圖片的本地文件列表,每一項是一個 File 對象

File 對象結(jié)構(gòu)如下

參數(shù)類型說明
pathString本地文件路徑
sizeNumber本地文件大小,單位:B
nameString包含擴展名的文件名稱,僅H5支持
typeString文件類型,僅H5支持

示例

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

這里給大家說個大坑

chooseImage這個方法的成功回調(diào)函數(shù),success 必須使用ES6 的箭頭函數(shù),否則this的作用域是當前函數(shù),就獲取不到data方法中的自己定義的變量。如果不理解的話,請看下面案例展示內(nèi)容。ES6 箭頭函數(shù)官方描述:對于普通函數(shù)來說,內(nèi)部的this指向函數(shù)運行時所在的對象,但是這一點對箭頭函數(shù)不成立。它沒有自己的this對象,內(nèi)部的this就是定義時上層作用域中的this。也就是說,箭頭函數(shù)內(nèi)部的this指向是固定的,相比之下,普通函數(shù)的this指向是可變的。

2、案例代碼演示

看了官網(wǎng)的案例 我們也來自己動手寫一寫。

本案例操作描述:默認顯示添加封面按鈕,點擊調(diào)用本地圖片選擇上傳一張作為封面使用,可進行切換。(忽略項目中比較丑陋的字體顏色,只做案例展示使用,與本人審美無關(guān)(狗頭))參數(shù)設置我在代碼中都做了詳細的解釋,沒有寫的參數(shù)使用官網(wǎng)的默認值。成功的回調(diào)函數(shù)success寫了一種 ES5 的形式,寫了一種 ES6 的形式供大家參考。封面圖片的src是用了動態(tài)賦值的方式(:src="cover")。
<template>
	<view>
		<view class="add-cover" @click="upload">
			<!-- 這里使用 :src="cover"  將src動態(tài)賦值-->
			<image class="cover" :src="cover" mode="aspectFill"></image>
			<view class="default">
				<image src="../../../static/add.png" class="add-icon"></image>
				<!-- 沒有上傳圖片時狀態(tài)是添加,上傳版完畢是切換 -->
				<text>點擊{{cover?'切換':'添加'}}封面</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: ''
			};
		},
		methods: {
			// 方式一:使用箭頭函數(shù)
			upload() {
				uni.chooseImage({
					count: 1, //默認9,這里設置只允許選擇一張圖片
					sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖,默認二者都有
					sourceType: ['album'], //這里選擇從相冊選擇,也可刪除此項設置默認拍照和相冊兩種選擇
					success: res => {
						// 實際開發(fā)中,成功的回調(diào)函數(shù)中是一個上傳圖片到服務器的接口,這里只是做了簡單的效果,實際根據(jù)接口需要的參數(shù)格式進行上傳
						// console.log(JSON.stringify(res.tempFilePaths)); 打印的結(jié)果是以數(shù)組方式返回的,所以我們只需要取第一個值:["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"] 
						this.cover = res.tempFilePaths[0] // 將選擇的圖片賦值給我們定義的cover
					}
				});
			}
			
			
			// 方式二:不使用箭頭函數(shù)(不使用箭頭函數(shù)就需要定義變量去賦值this,如下_this)
			// upload() {
			// 	var _this = this
			// 	uni.chooseImage({
			// 		count: 1, //默認9,這里設置只允許選擇一張圖片
			// 		sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖,默認二者都有
			// 		sourceType: ['album'], //這里選擇從相冊選擇,也可刪除此項設置默認拍照和相冊兩種選擇
			// 		success: function(res) {
			// 			_this.cover = res.tempFilePaths[0]
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	.cover {
		width: 100%;
		height: 350rpx;
	}

	.default {
		background-color: #f8f9fc;
		width: 100%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: red;
		font-weight: 800;
		position: absolute;
		top: 0;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.add-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}
</style>

在此說明:本案例只做了本地上傳圖片的效果,沒有調(diào)用接口上傳到服務器,實際工作開發(fā)中是會有圖片上傳接口的,官網(wǎng)也提供了對應的將本地資源上傳到開發(fā)者服務器API:uni.uploadFile(OBJECT),大家可以去參考一下。如有實際開發(fā)接口問題可私信博主。

3、效果展示

在這里插入圖片描述

到此這篇關(guān)于uniapp小程序上傳圖片的文章就介紹到這了,更多相關(guān)uniapp小程序 上傳圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論