欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp上傳圖片和上傳視頻的實現(xiàn)方法

 更新時間:2023年01月17日 10:07:23   作者:廖若星辰LTY  
這篇文章主要給大家介紹了關于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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論