微信小程序上传文件功能实现 |
您所在的位置：网站首页 › 小程序怎么上传pdf文件 › 微信小程序上传文件功能实现 |
微信小程序上传文件功能实现
|
在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信端. 
image.png
我们可以通过小程序的web-view实现.通过html的实现文件上传. web-view使用注意事项: 小程序web-view 不支持本地路径,只支持远程链接,链接必须在小程序管理后台配置业务域名;web-view加载需要在单个页面显示,而且会铺满屏幕,不支持局部渲染. 参数传递: (以下演示基于uni-app) 小程序 --> web-view 通过链接拼接参数的方式传递. export default { data() { return { pageUrl: '', // 页面地址 uploadUrl: '', //文件上传地址 } }, methods: { src() { return `${this.pageUrl}?url=${this.uploadUrl}` }, } }接收参数: function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") var r = window.location.search.substr(1).match(reg) if (r != null) return unescape(r[2]) return null } var uploadUrl = getUrlParam('url'); web-view --> 小程序 传递的参数必须通过data:{}返回,data中的参数的值必须是字符串类型. wx.miniProgram.postMessage({ data: { fileName: res.data.fileName, fileUrl: res.data.url } })接收参数: 网页向小程序 postMessage 时，会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。小程序触发bindmessage事件 html页面: 调用参数传递后,关闭页面(wx.miniProgram.navigateBack())触发接收参数事件 wx.miniProgram.postMessage({ data: { fileName: res.data.fileName, fileUrl: res.data.url } }) setTimeout(() => { wx.miniProgram.navigateBack() }, 500)小程序页面: ... handleMessage(evt) { console.log('接收到的消息：' + JSON.stringify(evt.detail.data)); } ...上传页面: 
image.png
点击下载源码 |
【本文地址】
今日新闻 |
推荐新闻 |