以下几种方法可供参考:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上传</title>
</head>
<body>
<input type="file" name="uploadFile" id="uploadFile">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
$("#uploadFile").change(function(event){
debugger;
var file1 = event.target.files[0];
// console.log(file1)
var file = {
lastModified:file1.lastModified,
lastModifiedDate:file1.lastModifiedDate,
name:file1.name,
size:file1.size,
type:file1.type,
webkitRelativePath:file1.webkitRelativePath,
}
// let maxSize = 5M;
// maxSize * 1024 * 1024 >
if(file.size > 0){
var reader = new FileReader();
reader.readAsBinaryString(file1)
reader.onloadend = function(e){
// file.fileBinary = reader.result
uni.navigateTo({
url: '../notification_management/notification_add?file='+ encodeURIComponent(JSON.stringify(file))
});
};
// console.log(file);
}else{
uni.showToast({
title: '请不要选择空文件',
icon:'none',
duration: 2000
});
}
})
</script>
<!-- <script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script> -->
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</body>
</html>
<template>
<web-view src="../../hybrid/html/new_index.html" @onPostMessage="handleMessage"></web-view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
}
}
</script>
<style>
</style>
/**
* 选择文件
*/
uploadFiles() {
uni.navigateTo({
url: "./new_file"
});
},