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

相关推荐
李纲明18 小时前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
dreams_dream20 小时前
微信小程序-使用npm包
微信小程序·小程序·npm
L1mbo21 小时前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序
caoliaoerweima1 天前
草料二维码小程序上线活码编辑器:手机上也能编辑活码了
智能手机·小程序·编辑器·草料二维码
大数据技术派1 天前
等了一周,我的摸鱼小程序终于微信认证通过了
微信小程序
CSharp精选营3 天前
记一次家庭物品管理的折腾:从“收纳”到“可检索”
微信小程序·aicoding·屋册有序·物品收纳管理·家庭收纳管理工具
dreams_dream3 天前
微信小程序:页面事件-上拉触底
微信小程序·小程序
鹏多多4 天前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
wafrdggh4 天前
2026电商快递批量查询怎么用?固乔助手模板设置评测
大数据·数据库·小程序
计算机毕设定制辅导-无忧学长5 天前
《基于微信小程序的居家医疗陪护预约系统设计与实现》
java·spring boot·微信小程序·uniapp·居家医疗陪护预约系统