微信小程序上传文件功能实现

在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信端.

image.png

我们可以通过小程序的web-view实现.通过html的<input>实现文件上传.

web-view使用注意事项:

1. 小程序web-view 不支持本地路径,只支持远程链接,链接必须在小程序管理后台配置业务域名;
2. web-view加载需要在单个页面显示,而且会铺满屏幕,不支持局部渲染.

参数传递: (以下演示基于uni-app)

1. 小程序 --> web-view
   通过链接拼接参数的方式传递.

<template name="input">
    <view>
        <web-view @message="handleMessage" :src="src()"></web-view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            pageUrl: '', // 页面地址
            uploadUrl: '', //文件上传地址
        }
    },
    methods: {
        src() {
            return `${this.pageUrl}?url=${this.uploadUrl}`
        },
    }
}
</script>

接收参数:

<script>
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');
</script>

1. 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)

小程序页面:

<web-view @message="handleMessage" :src="src()"></web-view>
...
handleMessage(evt) {
    console.log('接收到的消息：' + JSON.stringify(evt.detail.data));

}
...

上传页面:

image.png

 点击下载源码