uniapp App上传文件、音频(MP3),以及app跳转进入web-view的H5页面以后如何跳转回来。

uni.chooseFile

uni.chooseFile是一个很常用的api从本地选择文件,但是他有个大坑,只支持h5端也就是说你想在app端上传文件是用不了这个api。所以想到了用webView(不了解的先去看一下Uniapp的webView开发文档)
第一步我们要把项目打包成h5然后给服务器端让后端将这个路径返回给你

<web-view :src="upUrl"></web-view>

src是引入的h5页面路径也就是后端给你的上传页面的h5路径。此时的web-view页面就相当于是你需要上传音频文件、以及别的文件的页面。但是!!!可能会出现一些大坑比如我的只有一个打开相机并没有打开文件夹,此时要用到了input原生的file。
先创建一个id为upload的view

<view id="upload">上传</view>

接着开始用原生方式来操作dom

		mounted() {
			document.addEventListener('UniAppJSBridgeReady', function() {
				});
			// 创建附件上传
			var _self = this;
			var input = document.createElement('input'); //创建元素
			var upload = document.getElementById('upload')
			input.type = 'file' //添加file类型
			input.style.display = 'none'
			upload.onclick = (event) => {
				input.click();
			}
			input.onchange = (event) => {
				_self.upFile(input, event)
			}
			this.$refs.input.$el.appendChild(input)
		},
      methods:{
	      upFile(input, event) {
				var _self = this;
				uni.uploadFile({
					url: url,//你的上传接口
					files: [{
						file: input.files[0],
						uri: event.srcElement.value
					}],
					success: (res) => {
						var image = JSON.parse(res.data)
					
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
  }

到此就可以实现了。
可是!!还有大坑。此时跳转到这个页面进入了的是已经打包上传到H5的页面,也就是说不论再怎么跳转也是再H5内部进行跳转。这就涉及到了JS-SDK。
在status这个存放静态资源的文件夹里建立一个web-view.js的文件
在这里插入图片描述
https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js下载复制进去。
在这里插入图片描述

然后在mian.js里面引入
在这里插入图片描述
记得加条件编译。因为在app真机运行会报错。
然后就可以从h5跳转回app了。
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值