uniapp上傳圖片和上傳視頻的實現(xiàn)方法
基于 uniapp 的應用上傳圖片/視頻 資源的實現(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ù),默認9
// sizeType: ['compressed'], // original 原圖,compressed 壓縮圖,默認二者都有
sourceType: ['album'], // album 從相冊選圖,camera 使用相機,默認二者都有。如需直接開相機或直接選相冊,請只使用一個選項
});
// console.log('res:', res);
if(res.length < 2) { // 小于2則沒有選擇圖片
uni.hideLoading()
return
}
uploadFile = res[1].tempFilePaths[0]; // 拿到選擇的文件
var that1 = this;
// 2.將選擇的圖片上傳到目標服務器
const arr = await uni.uploadFile({
// 需要上傳的地址
url: that1.vuex_uploadAction,
// filePath 需要上傳的文件
filePath: uploadFile,
name: 'file',
timeout: 2000, // 超時時間
header: { // HTTP 請求 Header, header 中不能設置 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()
},注:示例代碼已封裝為一個方法,可直接調(diào)用,需要自定義之處可自行參照 API 文檔修改,比如從相冊選圖還是打開相機拍照、可上傳的圖片數(shù)量等
上傳視頻
// 上傳視頻
async chooseVideo() {
uni.showLoading({
mask: true,
title: '上傳中...'
})
// uploadFile 存儲需要上傳的文件
let uploadFile = ''
// 1.選擇要上傳的視頻
const res = await uni.chooseVideo({
maxDuration: 60, // 拍攝視頻最長拍攝時間,單位秒。最長支持 60 秒。
sourceType: ['album'], // album 從相冊選視頻,camera 使用相機拍攝,默認為:['album', 'camera']
});
uploadFile = res[1].tempFilePath;
// console.log(uploadFile);
var that2 = this;
// 2.上傳所選視頻到服務器
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()
}擴展
uniapp 還整合提供了上傳媒體文件(圖片/視頻)的 API: uni.chooseMedia 可用于上傳圖片和視頻。若有興趣可自行打開鏈接測試使用。
補充:上傳文件實例
上傳文件使用的LFile 這個插件 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ù)文件后綴名來判斷,展示對應的圖標
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";
},
//文件預覽
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上傳圖片和上傳視頻實現(xiàn)的文章就介紹到這了,更多相關(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)文章
詳解JavaScript Promise和Async/Await
這篇文章主要介紹了JavaScript Promise和Async/Await,對異步編程感興趣的同學,可以參考下2021-04-04

