看了太多人的文檔，拆開，組合，終于成功完成了這個寫法，從上周五，到今天周三，共花5天解決這個問題。
不需要任何所謂的網(wǎng)絡(luò)上傳（浪費我好幾天），不需要跨域，不需要token。
我大方，共享給大家，直接貼代碼（調(diào)用web-view）：
const?AdminBiz?=?require('../../../biz/admin_biz.js');
Page({
????/**
?????*?頁面的初始數(shù)據(jù)
?????*/
????data:?{?????????
????????????},
?????PostMessage(e){????
????????console.log(e)??????
????????//對H5返回的數(shù)據(jù)做處理
????????console.log('接收到的消息：'?+?JSON.stringify(e.detail.data));?????
????????????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面加載?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());??//權(quán)限
????????this.setData({
????????????src:?pageUrl',
????????})
????
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成?
?????*/
????onReady()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面顯示
?????*/
????onShow()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面隱藏
?????*/
????onHide()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面卸載
?????*/
????onUnload()?{
????},
????/**
?????*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
?????*/
????onPullDownRefresh()?{
????},
????/**
?????*?頁面上拉觸底事件的處理函數(shù)
?????*/
????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內(nèi)的word/pdf，500K以內(nèi)的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">
?? ??? ??? ??? ??? ?重新導(dǎo)入
?? ??? ??? ??? ?</button>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</body>
<script>
? ? // 選擇文件
const Upload = document.getElementById('upload');
Upload.onclick = () => {
?? ?oFile.click();
};
// 監(jiān)聽文件上傳
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')
?? ?
?? ?// 調(diào)用方法
fileToBase64(oFile.files[0], (res) => {
? if(res.status) {
? ? ? ? // console.log('file轉(zhuǎn)化成base64成功---',res.data)
? ? ?? ?myData['fileBase'] = res
?? ? ? wx.miniProgram.postMessage({
? ? ? ??? ?data: myData
? ? ? });
? ? ? ? wx.miniProgram.navigateBack({ delta: 1 });
?? ??? ?
? } else {
? ? console.log('file轉(zhuǎn)化base64失敗---',res.data)
? }
})
}
// 圖片file轉(zhuǎn)base64方法（file文件，回調(diào)函數(shù)）
?function fileToBase64(file, callback) {
? ? // 創(chuàng)建FileReader對象（不兼容IE）
? ? let reader = new FileReader();
? ? // 將file轉(zhuǎn)為base64 （異步操作）
? ? reader.readAsDataURL(file);?
? ? // 轉(zhuǎn)換成功
? ? reader.onload = () => {
? ? ? const response = {
? ? ? ? status: true,
? ? ? ? data: reader.result
? ? ? }
? ? ? callback(response);
? ? };
? ? // 轉(zhuǎn)換失敗
? ? reader.onerror = function () {
? ? ? const response = {
? ? ? ? status: false,
? ? ? ? data: reader.error
? ? ? }
? ? ? callback(response);
? ? };
? }
</script>
</html>文章來源：http://www.zghlxwxcb.cn/news/detail-609108.html
最后，謝謝CSDN各位大神共享。文章來源地址http://www.zghlxwxcb.cn/news/detail-609108.html
到了這里，關(guān)于微信小程序上傳手機(jī)內(nèi)部文件，PC文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
