uniapp上傳圖片和上傳視頻的實(shí)現(xiàn)方法
基于 uniapp 的應(yīng)用上傳圖片/視頻 資源的實(shí)現(xiàn):
功能涉及的主要 uniapp API 如下:
1.選擇圖片:uni.chooseImage(OBJECT) | uni-app官網(wǎng)
2.選擇視頻:uni.chooseVideo(OBJECT) | uni-app官網(wǎng)
3.上傳文件:uni.uploadFile(OBJECT) | uni-app官網(wǎng)
下面分別貼出示例代碼:
上傳圖片
// 上傳圖片
async chooseImages() {
uni.showLoading({
mask: true,
title: '上傳中...'
})
// uploadFile 存儲需要上傳的文件
let uploadFile = ''
// 1.選擇圖片(這里只能單選)
const res = await uni.chooseImage({
count: 1, // 最多可以選擇的圖片張數(shù),默認(rèn)9
// sizeType: ['compressed'], // original 原圖,compressed 壓縮圖,默認(rèn)二者都有
sourceType: ['album'], // album 從相冊選圖,camera 使用相機(jī),默認(rèn)二者都有。如需直接開相機(jī)或直接選相冊,請只使用一個(gè)選項(xiàng)
});
// console.log('res:', res);
if(res.length < 2) { // 小于2則沒有選擇圖片
uni.hideLoading()
return
}
uploadFile = res[1].tempFilePaths[0]; // 拿到選擇的文件
var that1 = this;
// 2.將選擇的圖片上傳到目標(biāo)服務(wù)器
const arr = await uni.uploadFile({
// 需要上傳的地址
url: that1.vuex_uploadAction,
// filePath 需要上傳的文件
filePath: uploadFile,
name: 'file',
timeout: 2000, // 超時(shí)時(shí)間
header: { // HTTP 請求 Header, header 中不能設(shè)置 Referer。
token: that1.vuex_token // 掛載請求頭為用戶的 token
},
});
// console.log(arr);
let data = JSON.parse(arr[1].data)
console.log('data:', data);
if(data.code !== 1) { // 圖片上傳失敗了
uni.hideLoading()
that1.$u.toast(data.msg)
return
}
// 上傳成功(把上傳成功后的文件路徑 push 到頁面需要顯示的圖片數(shù)據(jù)列表中)
that1.fileList.push(data.data.fullurl)
that1.formData.photo_url.push(data.data.url)
// console.log(that1.fileList);
uni.hideLoading()
},注:示例代碼已封裝為一個(gè)方法,可直接調(diào)用,需要自定義之處可自行參照 API 文檔修改,比如從相冊選圖還是打開相機(jī)拍照、可上傳的圖片數(shù)量等
上傳視頻
// 上傳視頻
async chooseVideo() {
uni.showLoading({
mask: true,
title: '上傳中...'
})
// uploadFile 存儲需要上傳的文件
let uploadFile = ''
// 1.選擇要上傳的視頻
const res = await uni.chooseVideo({
maxDuration: 60, // 拍攝視頻最長拍攝時(shí)間,單位秒。最長支持 60 秒。
sourceType: ['album'], // album 從相冊選視頻,camera 使用相機(jī)拍攝,默認(rèn)為:['album', 'camera']
});
uploadFile = res[1].tempFilePath;
// console.log(uploadFile);
var that2 = this;
// 2.上傳所選視頻到服務(wù)器
const arr = await uni.uploadFile({
// 需要上傳的地址
url: that2.vuex_uploadAction,
// filePath 需要上傳的文件
filePath: uploadFile,
name: 'file',
header: {
token: that2.vuex_token // 掛載請求頭為用戶的 token
},
});
let data = JSON.parse(arr[1].data)
console.log('data:', data);
if(data.code !== 1) { // 視頻上傳失敗了
uni.hideLoading()
that1.$u.toast(data.msg)
return
}
// 上傳成功(把上傳成功后的文件路徑 push 到頁面需要顯示的視頻數(shù)據(jù)列表中)
that2.uploadVideoUrl = data.data.fullurl
that2.formData.video_url = data.data.url
uni.hideLoading()
}擴(kuò)展
uniapp 還整合提供了上傳媒體文件(圖片/視頻)的 API: uni.chooseMedia 可用于上傳圖片和視頻。若有興趣可自行打開鏈接測試使用。
補(bǔ)充:上傳文件實(shí)例
上傳文件使用的LFile 這個(gè)插件 https://ext.dcloud.net.cn/plugin?id=4109
根據(jù)官網(wǎng)案例來
//上傳附件
uploadFile() {
const that = this;
if(that.imgUploadList.length >= 9){
this.$mHelper.toast('最多上傳9張')
return;
}
that.$refs.lFile.upload({
// #ifdef APP-PLUS
currentWebview: that.$mp.page.$getAppWebview(),
// #endif
url: 'xxxxxx', //你的上傳附件接口地址
name: 'file'
},
});
}, //上傳成功
upSuccess(res) {
let url = res.root.url;
let name = res.root.originalName;
let fileType = this.isFileType(res.root.type);
let size = res.root.size;
if(fileType == 'image'){
this.imgUploadList.push({url,name,fileType,size});
}else{
this.fileUploadList.push({url,name,fileType,size})
}
},
//根據(jù)文件后綴名來判斷,展示對應(yīng)的圖標(biāo)
isImage(type){
return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
},
isDocx(type){
return ['doc','docx'].includes(type.toLowerCase());
},
isXsls(type){
return ['xsls','xsl'].includes(type.toLowerCase());
},
isText(type){
return ['text','txt'].includes(type.toLowerCase());
},
isFileType(type){
if(this.isImage(type)) return 'image';
if(this.isXsls(type)) return 'excel';
if(type == 'pdf') return 'pdf';
if(this.isDocx(type)) return 'word';
if(this.isText(type)) return "text";
// return "#icon-file-b--6";
},
//文件預(yù)覽
previewFile(item){
uni.downloadFile({
url: item.url,
success: (res) => {
let filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
success: (res) => {
console.log('打開文檔成功');
}
})
}
})
},總結(jié)
到此這篇關(guān)于uniapp上傳圖片和上傳視頻實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp上傳圖片 上傳視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
- Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼
- Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
- Vue3?使用v-md-editor如何動態(tài)上傳圖片的方法實(shí)現(xiàn)
- vue3.0?移動端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫)
- 利用Vue3和element-plus實(shí)現(xiàn)圖片上傳組件
- uniapp上傳本地圖片以及以二進(jìn)制流的方式上傳
- uniapp小程序上傳圖片功能的實(shí)現(xiàn)
- uniapp+vue3實(shí)現(xiàn)上傳圖片組件封裝功能
相關(guān)文章
微信頁面倒計(jì)時(shí)代碼(解決safari不兼容date的問題)
本文主要分享了微信頁面倒計(jì)時(shí)代碼(pc端),并在文章結(jié)尾分析了safari不兼容date的原因以及解決方法,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12
用javascript刪除當(dāng)前行,添加行(示例代碼)
這篇文章主要介紹了用javascript刪除當(dāng)前行,添加行的示例代碼。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
詳解JavaScript Promise和Async/Await
這篇文章主要介紹了JavaScript Promise和Async/Await,對異步編程感興趣的同學(xué),可以參考下2021-04-04
使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序
這篇文章主要介紹了使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序,經(jīng)測試,效果相當(dāng)不錯(cuò),需要的朋友可以參考下2014-02-02
javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本
這篇文章主要介紹了javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本的相關(guān)資料,需要的朋友可以參考下2017-02-02
Js鼠標(biāo)跟隨代碼小手點(diǎn)擊實(shí)例方法
一個(gè)跟隨鼠標(biāo)的小手效果,鼠標(biāo)移在哪里,小手就跟著移向哪里,會出現(xiàn)手的效果,放在鏈接上的時(shí)候,手會變化,兩只手很可愛哦,JS鼠標(biāo)跟隨代碼分享與大家。2013-05-05
如何利用Three.js實(shí)現(xiàn)跳一跳小游戲
最近在公司寫H5的3D游戲,選擇了ThreeJS去做,做的過程中遇到了很多問題,下面這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)跳一跳小游戲的相關(guān)資料,需要的朋友可以參考下2022-04-04

