广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp上传图片和上传视频的实现方法
  • 464
分享到

uniapp上传图片和上传视频的实现方法

uniapp上传视频文件uniapp 上传图片vue视频上传 2023-01-17 12:01:35 464人浏览 安东尼
摘要

目录上传图片上传视频扩展补充:上传文件实例总结基于 uniapp 的应用上传图片/视频 资源的实现: 功能涉及的主要 uniapp API 如下: 1.选择图片:uni.choose

基于 uniapp 的应用上传图片/视频 资源的实现:

功能涉及的主要 uniapp API 如下:

1.选择图片:uni.chooseImage(OBJECT) | uni-app官网

2.选择视频:uni.chooseVideo(OBJECT) | uni-app官网

3.上传文件:uni.uploadFile(OBJECT) | uni-app官网

下面分别贴出示例代码:

上传图片

        // 上传图片
		async chooseImages() {
			uni.showLoading({
				mask: true,
				title: '上传中...'
			})
			// uploadFile 存储需要上传的文件
			let uploadFile = ''
			// 1.选择图片(这里只能单选)
			const res = await uni.chooseImage({
				count: 1,	// 最多可以选择的图片张数,默认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 到页面需要显示的图片数据列表中)
			that1.fileList.push(data.data.fullurl)
			that1.fORMData.photo_url.push(data.data.url)
			// console.log(that1.fileList);
			uni.hideLoading()
		},

注:示例代码已封装为一个方法,可直接调用,需要自定义之处可自行参照 api 文档修改,比如从相册选图还是打开相机拍照、可上传的图片数量等

上传视频

        // 上传视频
		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 到页面需要显示的视频数据列表中)
			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

根据官网案例来

 
		 //上传附件
			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})
				}
			},
         //根据文件后缀名来判断,展示对应的图标
        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上传图片和上传视频实现的文章就介绍到这了,更多相关uniapp上传图片 上传视频内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uniapp上传图片和上传视频的实现方法

本文链接: https://www.lsjlt.com/news/177971.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作