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)
}