微信小程序上传手机内部文件,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.files0)

const myData = {

filename: oFile.files0.name.split('.')0,

size: oFile.files0.size,

name: oFile.files0.name,

lastModified: oFile.files0.lastModified,

type: oFile.files0.type,

webkitRelativePath: oFile.files0.webkitRelativePath

};

// console.log(myData)

let sendData = JSON.stringify(myData)

// console.log(sendData, 'sendData')

// 调用方法

fileToBase64(oFile.files0, (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各位大神共享。

相关推荐
EatFan13 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
2301_322414280416 小时前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
CRMEB系统商城2 天前
CRMEB标准版系统(Java)v3.1正式发布
java·spring·微信小程序·php·教育电商
m0_587383002 天前
折扣卡CPS系统源码的技术架构与实战开发指南
人工智能·小程序·数据挖掘·系统架构·需求分析
2501_915106322 天前
苹果App Store上架费用及流程全面解析
android·ios·小程序·https·uni-app·iphone·webview
海岳云舟2 天前
通过Spring Authorization Server对微信小程序应用进行授权防护
微信小程序
T01156182 天前
全栈项目实战手记|艺培场馆课时预约小程序全项目开发历程完整复盘总结
运维·服务器·小程序
lhldsg2 天前
多商户团购系统源码:技术架构选型与二次开发实战指南
java·小程序·架构
2601_949950632 天前
一套小程序,解决资料整理、在线刷题和错题复盘
人工智能·小程序·刷题·练习·小程序推荐
白远山2 天前
智慧场馆解决方案小程序系统开发实战与架构设计指南
java·开发语言·小程序·架构