微信小程序上传手机内部文件，PC文件

大数据森森沐沐

已于 2023-07-26 11:35:12 修改

阅读量1.1k

点赞数

文章标签：微信小程序小程序 webview

于 2023-07-26 11:32:59 首次发布

本文链接：https://blog.csdn.net/m0_37845836/article/details/131935611

版权

看了太多人的文档，拆开，组合，终于成功完成了这个写法，从上周五，到今天周三，共花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">

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%;">
               
               
               
               <input type="file" id="file" style="display: none;" />
               
               <button id="upload" class="cu-btn">
                   重新导入
               </button>
           </div>
       </div>
   </div>
</body>

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