看了太多人的文档,拆开,组合,终于成功完成了这个写法,从上周五,到今天周三,共花5天解决这个问题。
不需要任何所谓的网络上传(浪费我好几天),不需要跨域,不需要token。
我大方,共享给大家,直接贴代码(调用web-view):
const AdminBiz = require('../../../biz/admin_biz.js');
Page({
/**
* 页面的初始数据
*/
data: {
},
PostMessage(e){
console.log(e)
//对H5返回的数据做处理
console.log('接收到的消息:' + JSON.stringify(e.detail.data));
},
/**
* 生命周期函数--监听页面加载 WXAPl.channelDataPull(“uploadH5Ur”)
*/
onLoad(options) {
if (!AdminBiz.isAdmin(this)) return;
let pageUrl = 'https://www.XXX.com/static/html/win_upload.html'; //页面地址
// console.log(AdminBiz.getAdminToken()); //权限
this.setData({
src: pageUrl',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
--------------------------------------------然后再贴HTML代码:------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>文件上传</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js">
</script>
<style>
svg {
margin-top: -100px;
}
div {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.file {
position: relative;
display: inline-block;
background: #007aff;
padding: 12px 70px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
border-radius: 20px;
color: #fff;
font-size: 13px;
margin-top: 70px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<div>
<div class="resunme">
<li class="upImg"></li>
<li>支持5M内的word/pdf,500K以内的jpg/png文件</li>
</div>
<div class="resume-look-bottom">
<div style="width: 92%;">
<!-- padding-bottom: 34px; -->
<!-- <button class="cu-btn bg-grey lg">玄灰</button> -->
<!-- style="visibility: none;" -->
<input type="file" id="file" style="display: none;" />
<!-- @click="toImport()" -->
<button id="upload" class="cu-btn">
重新导入
</button>
</div>
</div>
</div>
</body>
<script>
// 选择文件
const Upload = document.getElementById('upload');
Upload.onclick = () => {
oFile.click();
};
// 监听文件上传
const oFile = document.getElementById('file');
oFile.onchange = () => {
// console.log(oFile.files[0])
const myData = {
filename: oFile.files[0].name.split('.')[0],
size: oFile.files[0].size,
name: oFile.files[0].name,
lastModified: oFile.files[0].lastModified,
type: oFile.files[0].type,
webkitRelativePath: oFile.files[0].webkitRelativePath
};
// console.log(myData)
let sendData = JSON.stringify(myData)
// console.log(sendData, 'sendData')
// 调用方法
fileToBase64(oFile.files[0], (res) => {
if(res.status) {
// console.log('file转化成base64成功---',res.data)
myData['fileBase'] = res
wx.miniProgram.postMessage({
data: myData
});
wx.miniProgram.navigateBack({ delta: 1 });
} else {
console.log('file转化base64失败---',res.data)
}
})
}
// 图片file转base64方法(file文件,回调函数)
function fileToBase64(file, callback) {
// 创建FileReader对象(不兼容IE)
let reader = new FileReader();
// 将file转为base64 (异步操作)
reader.readAsDataURL(file);
// 转换成功
reader.onload = () => {
const response = {
status: true,
data: reader.result
}
callback(response);
};
// 转换失败
reader.onerror = function () {
const response = {
status: false,
data: reader.error
}
callback(response);
};
}
</script>
</html>文章来源:https://www.toymoban.com/news/detail-609108.html
最后,谢谢CSDN各位大神共享。文章来源地址https://www.toymoban.com/news/detail-609108.html
到了这里,关于微信小程序上传手机内部文件,PC文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!