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了。