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();
}
});
總結
到此這篇關于uniapp基礎篇之上傳圖片的文章就介紹到這了,更多相關uniapp上傳圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片跟隨鼠標移動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
關于十六進制編碼的問題在很多情況下都會用到，所以使用JS寫了個小程序轉換一下2014-04-04
這篇文章主要介紹了JS實現(xiàn)Tab欄切換的兩種方式,一種是面向過程的寫法，一種是面向對象的寫法，本文給大家分享詳細案例代碼，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)字拼圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript具有類似Lambda表達式編程能力的代碼(改進版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達式的編程能力——但是它有一些缺點，其中妨礙它的使用的最主要的一條就是多了一層括號，讓代碼變得難以閱讀。2010-09-09
本文主要介紹了uniapp如何動態(tài)獲取接口域名，感興趣的同學，可以參考下，并且試驗一下。2021-06-06
利用JavaScript實現(xiàn)新聞滾動效果(實例代碼)
這篇文章主要是對利用JavaScript實現(xiàn)新聞滾動效果的兩種方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼
這篇文章主要介紹了js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
在本篇文章里小編給大家整理的是關于JS模塊化的知識點分享，有需要的朋友們可以學習下。2019-10-10
這篇文章主要介紹了記錄一次開發(fā)微信網(wǎng)頁分享的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05