uniapp小程序上傳圖片功能的實現(xiàn)
??前言
本篇文章我們研究一下,在移動端開發(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ù)名 | 類型 | 必填 | 說明 | 平臺差異說明 |
---|---|---|---|---|
count | Number | 否 | 最多可以選擇的圖片張數(shù),默認9 | 見下方說明 |
sizeType | Array | 否 | original 原圖,compressed 壓縮圖,默認二者都有 | App、微信小程序、支付寶小程序、百度小程序 |
extension | Array | 否 | 根據(jù)文件拓展名過濾,每一項都不能是空字符串。默認不過濾。 | H5(HBuilder X2.9.9+) |
sourceType | Array | 否 | album 從相冊選圖,camera 使用相機,默認二者都有。如需直接開相機或直接選相冊,請只使用一個選項 | |
crop | Object | 否 | 圖像裁剪參數(shù),設置后 sizeType 失效 | App 3.1.19+ |
success | Function | 是 | 成功則返回圖片的本地文件路徑列表 tempFilePaths | |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | 小程序、App |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
crop 參數(shù)說明
參數(shù)名 | 類型 | 必填 | 說明 | 平臺差異說明 |
---|---|---|---|---|
quality | Number | 否 | 取值范圍為1-100,數(shù)值越小,質(zhì)量越低(僅對jpg格式有效)。默認值為80。 | |
width | Number | 是 | 裁剪的寬度,單位為px,用于計算裁剪寬高比。 | |
height | Number | 是 | 裁剪的高度,單位為px,用于計算裁剪寬高比。 | |
resize | Boolean | 否 | 是否將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ù) | 類型 | 說明 |
---|---|---|
tempFilePaths | Array | 圖片的本地文件路徑列表 |
tempFiles | Array、Array | 圖片的本地文件列表,每一項是一個 File 對象 |
File 對象結(jié)構(gòu)如下
參數(shù) | 類型 | 說明 |
---|---|---|
path | String | 本地文件路徑 |
size | Number | 本地文件大小,單位:B |
name | String | 包含擴展名的文件名稱,僅H5支持 |
type | String | 文件類型,僅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)文章希望大家以后多多支持腳本之家!
- vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳
- Vue3+Koa2實現(xiàn)圖片上傳功能的示例代碼
- Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復提交功能
- Vue3?使用v-md-editor如何動態(tài)上傳圖片的方法實現(xiàn)
- vue3.0?移動端二次封裝van-uploader實現(xiàn)上傳圖片(vant組件庫)
- 利用Vue3和element-plus實現(xiàn)圖片上傳組件
- uniapp上傳本地圖片以及以二進制流的方式上傳
- uniapp上傳圖片和上傳視頻的實現(xiàn)方法
- uniapp+vue3實現(xiàn)上傳圖片組件封裝功能
相關(guān)文章
JS/jQuery實現(xiàn)超簡單的Table表格添加,刪除行功能示例
這篇文章主要介紹了JS/jQuery實現(xiàn)超簡單的Table表格添加,刪除行功能,結(jié)合實例形式詳細分析了JS與jQuery針對Table表格添加,刪除行功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-07-07ajaxControlToolkit AutoCompleteExtender的用法
昨天在搜索中使用了這個控件,不過不知道為什么在IE中反應比較慢2008-10-10HTML頁面,測試JS對C函數(shù)的調(diào)用簡單實例
下面小編就為大家?guī)硪黄狧TML頁面,測試JS對C函數(shù)的調(diào)用簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08Iphone手機、安卓手機瀏覽器控制默認縮放大小的方法總結(jié)(附代碼)
這篇文章主要介紹了Iphone手機、安卓手機瀏覽器控制默認縮放大小的方法,通過meta標簽中添加屬性代碼展示控制瀏覽器的默認縮放,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08