此处代码只针对APP，如果要针对全端们可以参考这个。
https://ext.dcloud.net.cn/plugin?id=5459
同样项目需求是这样要求可以在APP上传任意文件，没法啊，硬着头皮搞啊，插件市场找啊，哎~~没一个满足需求的。根据上个链接的启发.自己写一个，当然咱们项目是APP，所以只满足了APP端。
重点
讲一下几个重点把。
webview: 可以了解uniapp的webview和H5+的webview(我用的H5+)webview和uniapp的通信： 如果不用通信可以不考虑这个。- ·
input type=file: 包括css样式，以及js的书写(这个不难)。
思路
如果上面三个都有所了解，那么我简单的讲一下我的思路：
在
Vue项目中(咱们有web端，所以有个项目)创建一个页面，页面的内容就是上传文件。uniapp利用webview嵌套Vue中的页面，上传文件之后，如果你需要做出一下交互，那么可以使用uniapp和webview的交互。
上代码
vue项目中的页面代码，就是一个上传文件的代码，需要多文件上传就把multiple加上，不要就不加。
如果需要给uniapp通信，那么在Vue项目中需要引入一个文件。这个文件必不可少，不然无法使用uniapp中的一些方法。
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<template>
<div>
<--! HTML结构自己按照自己需求写，只用关注input就行 -->
<div class="file">
<div>上传</div>
<input @change="onChange" ref="file" class="file" type="file" multiple />
<div class="file-list">
<div class="file-one" v-for="(file, i) in filesList" :key="i">
<div>{{file.name}}</div>
<i class="el-icon-delete" @click.stop="handleDelete(file)"></i>
</div>
</div>
</div>
<div class="submit" @click="handleSubmit">确定</div>
</div>
</template>
<script>
export default {
data() {
return {
filesList: [],
info: '',
token: ''
};
},
created() {
// 这里是接收uniapp中传递过来的参数
let route = this.$route.query
//苹果和安卓的接收参数有问题，这个根据自身需求改一下
if(route.isIos === 'true') {
let { data, token } = plus.webview.currentWebview();
this.info = data
this.token = token
localStorage['eleToken'] = token
console.log(data)
} else {
this.info = route.data
this.token = route.token
localStorage['eleToken'] = route.token
}
},
methods: {
// 上传文件事件
onChange() {
console.log(this.$refs.file.files)
this.filesList.push(...this.$refs.file.files)
},
// 提交事件，根据自身需求写
async handleSubmit() {
let formData = new FormData()
this.filesList.forEach(file => formData.append('Files', file));
formData.append('info', this.info)
try {
await this.$axios.post('/api/Techno/AddProgramme', formData)
// 这里项目需要给app通信，所以需要写下面个
uni.webView.postMessage({
data: {
success: "success"
}
});
} catch(error) {
}
},
// 删除文件
handleDelete(file) {
let i = this.filesList.findIndex(item => item === file)
this.filesList.splice(i, 1)
}
}
}
</script>
<style scoped>
// 样式什么的可以参考一下，没什么卵用
.file {
display: flex;
flex-direction: column;
width: 100%;
height: 114px;
font-size: 13px;
padding-left: 5px;
padding-top: 5px;
box-sizing: border-box;
}
.file input {
position: absolute;
opacity: 0;
top: 0;
z-index: 2;
width: 80%;
}
.file-list {
flex: 1;
padding-top: 10px;
overflow: auto;
}
.file-one {
display: flex;
justify-content: space-between;
height: 30px;
padding: 0 5px;
}
.file-one i {
font-size: 18px;
width: 10%;
}
.submit {
height: 40px;
width: 90vw;
background-color: #2979ff;
margin: 0 auto;
color: #fff;
line-height: 40px;
text-align: center;
border-radius: 8px;
}
</style>
uniapp中的代码。里面有几个接口是什么意思自行查阅。
应该关注的就是plus.webview.create方法，传递的参数什么的就自己理解，自己查阅资料。这里的代码整体就是嵌套了Vue中的那个页面。
init() {
// #ifdef APP-PLUS
var _this = this
uni.getSystemInfo({
success: res => {
uni.createSelectorQuery().select("#file").boundingClientRect(son => {
var url = _this.webUrl + 'appfile'
var token = uni.getStorageSync('token');
if (res.platform == 'ios') {
url = url + '?isIos=true'
} else {
url = url +
`?isIos=false&token=${encodeURIComponent(token)}&data=${JSON.stringify(_this.formData)}`
}
console.log(url +
`?isIos=false&token=${encodeURIComponent(token)}&data=${JSON.stringify(_this.formData)}`)
var wv = plus.webview.create(url, 'lijin', {
top: son.top + son.height,
height: res.windowHeight - son.top - son.height + 200,
width: res.screenWidth,
position: "static" // 跟随父页面滚动
}, {
data: JSON.stringify(_this.formData),
token: uni.getStorageSync('token')
})
_this.wv = wv
var currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
wv.show()
}).exec()
}
})
// #endif
},
如果存在uniapp和webview页面的通信，记得加上这个。
mounted() {
// this.init()
plus.globalEvent.addEventListener('plusMessage', function(msg){
if(msg.data.args.data.name == 'postMessage'){
// 上面代码中我传递了一个success属性
// 这里对应
if(msg.data.args.data.arg.success == "success"){
// 通信成功
// 这里需要做些什么自行决定，我的大宝贝
// #endif
}
}
});
},