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

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

最后,谢谢CSDN各位大神共享。

相关推荐
来碗盐焗星球1 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域3 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域6 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero13 小时前
微信小程序71~80
微信小程序·小程序
dssxyz14 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !14 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_18 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子1 天前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481211 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5