vue页面引入:
html页面:
<title>上传文件</title>
<body style="position: fixed; top: 300px; left: 47%;">
<div class="head-btn">
<form action="" method="post">
<a href="javascript:;" class="file">选择文件
<input type="file" name="uploadFile" id="uploadFile" >
</a>
</form>
<p class="showFileName"></p>
</div>
<div class="box_btn" id="app">
<button class="btn" type="button" data-action="redirectTo">确定</button>
<button class="btn1" type="button" data-action="navigateBack" id="postMessage">取消</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
var title = document.getElementsByTagName('title')[0];
function getQuery(name) { // 获取uni传值
// 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) {
// 对参数值进行解码
return unescape(r[2]);
}
return null;
}
// 文件上传
$('.btn').click(function(evt) {
var ipt = document.getElementById('uploadFile');
var formdata = new FormData(); // 创建一个form类型的数据
formdata.append("files",ipt.files[0]); // 获取上传文件的数据
formdata.append("orderId",getQuery('orderId')); // 获取上传文件的数据
formdata.append("name","name"); // 获取上传文件的数据
// console.log(formdata)
// 改变title
title.innerText = '上传'
$.ajax({
url: '后端接口',
type: "POST",
processData: false,
contentType: false,
data:formdata,
headers: {
'token': getQuery('token')
},
success: function(res) {
// 改变title
title.innerText = res.message
},
error: function(err) {
alert('上传失败')
}
});
});
//取消文件上传
$('.btn1').click(function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if (action == 'navigateBack') {
// 改变title
title.innerText='取消'
}
}
});
</script>
vue页面:
// 监听title是安卓原生事件
shang () { // 上传
// 获取所有的webview对象
const currentWebview = _this.$mp.page.$getAppWebview();
// 需要延时,不然拿不到
setTimeout(function(){
// 获取当前页面的webview对象
var web = currentWebview.children()[0];
// 监听当前页面webview对象的title
web.addEventListener('titleUpdate',({title}) => {
if (title === '上传') {
uni.showLoading({ // 动画
title: '上传中'
});
// title!=='上传文件'
} else if (title&&!title.includes('上传文件')) {
uni.hideLoading(); // 关闭动画
uni.showToast({ // 提示框
title: title,
icon: 'none',
duration: 1000
});
}
if (title === '取消') {
uni.showToast({ // 提示框
title: '取消上传',
icon: 'none',
duration: 1000
});
}
},false)
},200)
}