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

相关推荐
黄华SJ520it18 小时前
预约上门系统开发:懒人经济下的商业机遇与技术实践
小程序·系统开发
软件技术新观察21 小时前
2026年北京教育医疗小程序与APP定制开发:十大服务商实力测评
大数据·小程序
万岳科技程序员小金1 天前
真人数字人小程序如何开发?AI数字人平台搭建流程全面解析
人工智能·小程序·ai数字人系统源码·ai数字人平台搭建·ai数字人小程序开发
didiplus1 天前
我在GitHub刷到一个诗词API,顺手写了款小程序
微信小程序
言乐61 天前
Python实现可运行解密游戏游戏框架
python·游戏·小程序·游戏程序·关卡设计
2501_915106322 天前
iOS 软件测试工具性能监控、日志分析 KeyMob、Instruments等
android·ios·小程序·https·uni-app·iphone·webview
云迈科技-软件定制开发2 天前
2026 AI智能体小程序APP开发怎么做:从场景规划到上线交付的完整参考
大数据·人工智能·小程序
小码哥0682 天前
医院陪诊小程序怎么开发-医院陪诊小程序源码功能-微信小程序 医院健康陪诊陪护系统
微信小程序·小程序·医院陪诊·陪诊系统·陪诊陪诊
书中枫叶3 天前
从「上次几点喂奶」到全栈小程序:我做了个喂宝助手
mongodb·微信小程序·node.js
黄华SJ520it3 天前
柯尔嫚商城模式开发:从概念到实现的完整指南
小程序·系统开发