uni.chooseImage(OBJECT) 從本地相冊選擇圖片或使用相機拍照。
count Number 否 最多可以選擇的圖片張數,默認9
sizeType StringArray 否 original 原圖,compressed 壓縮圖,默認二者都有
sourceType StringArray 否 album 從相冊選圖,camera 使用相機,默認二者都有
success Function 是 成功則返回圖片的本地文件路徑列表 tempFilePaths
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數(調用成功、失敗都會執行)
注:文件的臨時路徑,在應用本次啟動期間可以正常使用,如需持久保存,需在主動調用 uni.saveFile,在應用下次啟動時才能訪問得到。
success 返回參數說明
參數 類型 說明
tempFilePaths StringArray 圖片的本地文件路徑列表
tempFiles ObjectArray 圖片的本地文件列表,每一項是一個 File 對象
File 對象結構如下
path String 本地文件路徑
size Number 本地文件大小,單位:B
示例
uni.chooseImage({
count: 6, //默認9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ['album'], //從相冊選擇
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
uni.previewImage(OBJECT)
預覽圖片
OBJECT 參數說明
current String 否 當前顯示圖片的鏈接,不填則默認為 urls 的第一張
urls StringArray 是 需要預覽的圖片鏈接列表
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數(調用成功、失敗都會執行)
示例
uni.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function (res) {
// 預覽圖片
uni.previewImage({
urls: res.tempFilePaths
});
}
});
uni.getImageInfo(OBJECT) 獲取圖片信息
OBJECT 參數說明
參數名 類型 必填 說明
src String 是 圖片的路徑,可以是相對路徑,臨時文件路徑,存儲文件路徑,網絡圖片路徑
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數(調用成功、失敗都會執行)
success 返回參數說明
參數名 類型 說明 最低版本
width Number 圖片寬度,單位px *
height Number 圖片高度,單位px *
path String 返回圖片的本地路徑 *
orientation String 返回圖片的方向,有效值見下表 *
type String 返回圖片的格式 *
orientation 參數說明
枚舉值 說明
up 默認
down 180度旋轉
left 逆時針旋轉90度
right 順時針旋轉90度
up-mirrored 同up,但水平翻轉
down-mirrored 同down,但水平翻轉
left-mirrored 同left,但垂直翻轉
right-mirrored 同right,但垂直翻轉
示例
uni.chooseImage({
count: 1,
sourceType: ['album'],
success: function (res) {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function (image) {
console.log(image.width);
console.log(image.height);
}
});
}
});
uni.saveImageToPhotosAlbum(OBJECT)
保存圖片到系統相冊
參數名 類型 必填 說明
filePath String 是 圖片文件路徑,可以是臨時文件路徑也可以是永久文件路徑,不支持網絡圖片路徑
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數(調用成功、失敗都會執行)
success 返回參數說明
參數名 類型 說明
errMsg String 調用結果
示例代碼:
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: function (res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success: function () {
console.log('save success');
}
});
}
});
- 第1講 : 創建項目、部署 VUE 、入口頁面布局
- 第2講,快速開始第一個項目
- 第3講 : uni-app 開發規范及目錄結構
- 第4講 : uni-app 頁面樣式與布局
- 第5講 : uni-app 配置文件 - pages.json
- 第6講 : 配置文件 - manifest.json
- 第7講 : uni-app 頁面生命周期
- 第8講 : uni-app 模板語法 - 數據綁定
- 第9講Class 與 Style 綁定 (動態菜單激活示例)
- 第10講 : uni-app 事件處理、事件綁定、事件傳參
- 第11講 : uni-app 組件 - 基礎組件
- 第12講 : uni-app 組件 - 表單組件
- 第13講 : uni-app 組件 - navigator(導航)及頁
- 第14講 : uni-app 組件 - 媒體組件
- 第15講 : uni-app 組件 - 地圖組件
- 第16講 : uni-app 接口 - 網絡請求
- 第17講 : uni-app 接口 - 從本地相冊選擇圖片或使
- 第18講 : uni-app 上傳(圖片上傳實戰)
- 第19講 : uni-app 接口 - 數據緩存
- 第20講 : uni-app 設備相關
- 第21講 : uni-app 交互反饋
- 第22講 : uni-app 設置導航條
- 第23講 : uni-app 導航(頁面流轉)
- 第24講 : uni-app 下拉刷新
- 第25講 : uni-app 上拉加載更多
- 第26講 : uni-app 第三方登錄(小程序篇)
- 第27講 : uni-app 登錄(h5+ app 篇)
- 第28講 : 自定義組件創建及使用