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() },
注:示例代碼已封裝為一個方法,可直接調用,需要自定義之處可自行參照 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('打開文檔成功'); } }) } }) },
總結
到此這篇關于uniapp上傳圖片和上傳視頻實現(xiàn)的文章就介紹到這了,更多相關uniapp上傳圖片 上傳視頻內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- vue3中el-uplod結合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)上傳圖片組件封裝功能
相關文章
淺析webpack 如何優(yōu)雅的使用tree-shaking(搖樹優(yōu)化)
這篇文章主要介紹了webpack 如何使用tree-shaking(搖樹優(yōu)化),本文介紹了什么是tree-shaking,commonJS 模塊,es6 模塊,怎么使用tree-shaking等,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08淺析document.createDocumentFragment()與js效率
對于循環(huán)批量操作頁面的DOM有很大幫助!利用文檔碎片處理,然后一次性append,并且使用原生的javascript語句操作2013-07-07Jsonp 關鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別
這篇文章主要介紹了Jsonp 關鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別 的相關資料,需要的朋友可以參考下2015-12-12js函數(shù)獲取html中className所在的內容并去除標簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內容,具體實現(xiàn)思路如下,喜歡的朋友可以參考下2013-09-09