這篇具有很好參考價(jià)值的文章主要介紹了在uniapp中從本地相冊(cè)選擇圖片或使用相機(jī)拍照。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。
在uniapp中從本地相冊(cè)選擇圖片或使用相機(jī)拍照，可以使用uniapp中內(nèi)置的API?uni.chooseImage?。文章來源地址http://www.zghlxwxcb.cn/news/detail-756126.html
參數(shù)
| 名稱 |
類型 |
必填 |
默認(rèn)值 |
描述 |
| options |
ChooseImageOptions |
是 |
- |
- |
ChooseImageOptions 屬性值
| 名稱 |
類型 |
必備 |
默認(rèn)值 |
描述 |
| count |
number |
否 |
9 |
最多可以選擇的圖片張數(shù)，app端不限制，微信小程序最多可支持20個(gè)。 |
| sizeType |
Array<string> |
否 |
['original','compressed'] |
original 原圖，compressed 壓縮圖，默認(rèn)二者都有 |
| sourceType |
Array<string> |
否 |
['album','camera'] |
album 從相冊(cè)選圖，camera 使用相機(jī)，默認(rèn)二者都有 |
| extension |
Array<string> |
否 |
- |
根據(jù)文件拓展名過濾，每一項(xiàng)都不能是空字符串。默認(rèn)不過濾。僅H5支持 |
| crop |
ChooseImageCropOptions |
否 |
- |
圖像裁剪參數(shù)，設(shè)置后 sizeType 失效。 |
| success |
(callback:?ChooseImageSuccessCallback) => void |
否 |
- |
成功則返回圖片的本地文件路徑列表 tempFilePaths |
| fail |
(callback:?UniError) => void |
否 |
- |
接口調(diào)用失敗的回調(diào)函數(shù) |
| complete |
(callback: any) => void |
否 |
- |
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
ChooseImageCropOptions 屬性值
| 名稱 |
類型 |
必備 |
默認(rèn)值 |
描述 |
| width |
number |
是 |
- |
裁剪的寬度，單位為px，用于計(jì)算裁剪寬高比。 |
| height |
number |
是 |
- |
裁剪的高度，單位為px，用于計(jì)算裁剪寬高比。 |
| quality |
number |
否 |
80 |
取值范圍為1-100，數(shù)值越小，質(zhì)量越低（僅對(duì)jpg格式有效）。默認(rèn)值為80。 |
| resize |
boolean |
否 |
- |
是否將width和height作為裁剪保存圖片真實(shí)的像素值。默認(rèn)值為true。注：設(shè)置為false時(shí)在裁剪編輯界面顯示圖片的像素值，設(shè)置為true時(shí)不顯示。 |
ChooseImageSuccessCallback 屬性值
| 名稱 |
類型 |
必備 |
默認(rèn)值 |
描述 |
| errSubject |
string |
是 |
- |
調(diào)用API的名稱 |
| errMsg |
string |
是 |
- |
- |
| tempFilePaths |
Array<string> |
是 |
- |
- |
| tempFiles |
any |
是 |
- |
- |
chooseImage 兼容性
| 安卓系統(tǒng)版本 |
安卓 uni-app |
安卓 uni-app-x |
iOS 系統(tǒng)版本 |
iOS uni-app |
iOS uni-app-x |
| 4.4 |
√ |
3.9+ |
- |
- |
- |
具體代碼實(shí)現(xiàn)
<template>
<view>
<button @click="chooseImage">選擇圖片</button>
<image v-for="(image, index) in images" :src="image" :key="index" mode="aspectFit"></image>
</view>
</template>
<script>
export default {
data() {
return {
images: [] // 存儲(chǔ)選擇的圖片路徑
};
},
methods: {
chooseImage() {
uni.chooseImage({
count: 6, // 圖片數(shù)量，這里設(shè)置為6
sizeType: ['original', 'compressed'], // 指定選擇的圖片類型，可以選擇原圖和壓縮圖，這里設(shè)置為二者都有
sourceType: ['album', 'camera'], // 指定選擇圖片的來源，這里設(shè)置為相冊(cè)和相機(jī)
success: (res) => {
this.images.push(res.tempFilePaths);
},
fail: (err) => {
console.log('選擇圖片失敗', err);
}
});
}
}
};
</script>
文章來源：http://www.zghlxwxcb.cn/news/detail-756126.html
到了這里，關(guān)于在uniapp中從本地相冊(cè)選擇圖片或使用相機(jī)拍照的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！
