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 存儲(chǔ)需要上傳的文件
let uploadFile = ''
// 1.選擇圖片(這里只能單選)
const res = await uni.chooseImage({
count: 1, // 最多可以選擇的圖片張數(shù),默認(rèn)9
// sizeType: ['compressed'], // original 原圖,compressed 壓縮圖,默認(rèn)二者都有
sourceType: ['album'], // album 從相冊(cè)選圖,camera 使用相機(jī),默認(rèn)二者都有。如需直接開相機(jī)或直接選相冊(cè),請(qǐng)只使用一個(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 請(qǐng)求 Header, header 中不能設(shè)置 Referer。
token: that1.vuex_token // 掛載請(qǐng)求頭為用戶的 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 文檔修改,比如從相冊(cè)選圖還是打開相機(jī)拍照、可上傳的圖片數(shù)量等
上傳視頻
// 上傳視頻
async chooseVideo() {
uni.showLoading({
mask: true,
title: '上傳中...'
})
// uploadFile 存儲(chǔ)需要上傳的文件
let uploadFile = ''
// 1.選擇要上傳的視頻
const res = await uni.chooseVideo({
maxDuration: 60, // 拍攝視頻最長(zhǎng)拍攝時(shí)間,單位秒。最長(zhǎng)支持 60 秒。
sourceType: ['album'], // album 從相冊(cè)選視頻,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 // 掛載請(qǐng)求頭為用戶的 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 可用于上傳圖片和視頻。若有興趣可自行打開鏈接測(cè)試使用。
補(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ù)文件后綴名來判斷,展示對(duì)應(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)容請(qǐng)搜索腳本之家以前的文章或繼續(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如何動(dòng)態(tài)上傳圖片的方法實(shí)現(xiàn)
- vue3.0?移動(dòng)端二次封裝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)文章
淺析webpack 如何優(yōu)雅的使用tree-shaking(搖樹優(yōu)化)
這篇文章主要介紹了webpack 如何使用tree-shaking(搖樹優(yōu)化),本文介紹了什么是tree-shaking,commonJS 模塊,es6 模塊,怎么使用tree-shaking等,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
淺析document.createDocumentFragment()與js效率
對(duì)于循環(huán)批量操作頁面的DOM有很大幫助!利用文檔碎片處理,然后一次性append,并且使用原生的javascript語句操作2013-07-07
JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別
這篇文章主要介紹了Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別 的相關(guān)資料,需要的朋友可以參考下2015-12-12
js函數(shù)獲取html中className所在的內(nèi)容并去除標(biāo)簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內(nèi)容,具體實(shí)現(xiàn)思路如下,喜歡的朋友可以參考下2013-09-09
微信小程序 導(dǎo)入圖標(biāo)實(shí)現(xiàn)過程詳解
這篇文章主要介紹了微信小程序 導(dǎo)入圖標(biāo)實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10

