微信小程序上传手机内部文件,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各位大神共享。

相关推荐
全职计算机毕业设计15 分钟前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
流***陌9 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB9 小时前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域12 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_9160074715 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗17 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_9159214321 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手21 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q196328847521 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
韩立学长1 天前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序