使用webview实现小程序本地文件上传

更多文章请访问 深的个人博客

最近因为公司有个小程序的项目需求是让用户上传本地文件(使用uni-app开发),查阅了小程序的api,发现小程序只开放了两个相应的api

API
wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照
wx.chooseMessageFile(Object object) 从客户端会话选择文件(注意:从客户端会话选择文件是指从微信聊天里选择对应的文件)

因为这两个API都不能实现项目需求,所以在查阅了相应的资料后,发现目前只能走一条路:使用webview实现文件上传

强烈推荐:如果要把文件上传到七牛云或者自有服务服务器的话,可以直接在webview链接的html里直接将文件上传的七牛云(通过七牛云JSSDK上传)或自有服务器(通过axios上传),再把返回的key,hash值或者后端返回的链接传递给小程序,没有必要再去把文件转base64,具体可参考以下两篇文章

uni-app使用webview上传文件(自有服务器版本)
uni-app 使用webview上传文件(七牛云版本)

注意点:微信小程序的webview是不支持加载本地的html,所以只能将html文件部署在服务器上来加载(页面可以先本地写好,然后使用vscode的ssh连接服务器,一边修改一边调试)

使用webview实现小程序本地文件上传_第1张图片

整体的思路

使用webview实现小程序本地文件上传_第2张图片

webview使用过程中的注意点

基础库版本

选择2.16.0 ,选择2.14版本会报错

使用webview实现小程序本地文件上传_第3张图片

小程序跳转到webview页面会造成本地存储丢失

因为在跳转到webview页面的时候,小程序会关闭,这个时候是会清空本地存储的,所以在webview跳转回小程序的时候,是无法调用到之前存储在本地的数据的,而且小程序是无法使用cookie的,所以只能把数据传递到webview链接的html页面,然后再从html页面中传递回来

webview链接的hmtl页面传递回来的数据类型

webview链接的html页面使用 uni.postMessage API传递数据的时候只能传递字符串

webview的使用

关于webview的使用以及通信,uni-app官方有对应的文档,可以查看:

​ webvie官方文档

​ 在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯

引入sdk

  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js">script>  
  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js">script>

调用时机

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('当前环境:' + JSON.stringify(res));  
    });  
});

传递信息

uni.postMessage 中的参数格式,必须是 data: {}。也就是说,传递的消息信息必须在 data 这个对象中。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.postMessage({  
        data: {  
            action: 'postMessage'  
        }  
    });  
});

vue页面(小程序)向html页面(webview)传递数据

通过url传参 : http://www.yemengshen.cn/main?id=123&token=jakdjfjkjad89jjdkk

html页面解析参数

// 获取小程序传递过来的参数
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 id = getUrlParam('id')
var token = getUrlParam('token')

html页面(webview)向vue页面(小程序)发送数据

因为只能传递字符串所以需要对文件对象转换成base64

 // 需要传递多个参数可以进行字符串拼接或者多次调用该api
 uni.postMessage({  
        data: {  
            action: 'postMessage'  
        }  
 });

// 文件转base64
function fileToBase64(file) {
    return new Promise(function(resolve, reject) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
            typeof reader.result === 'string' && resolve(reader.result) || reject();
        };
        reader.onerror = function(error) { return reject(error); };
    });
};

关于文件转换成base64格式的包(公司的大佬封装好的):文件转base64包

vue页面(小程序)接收 html页面(webview)传递的数据

每次执行 postMessage 后,传递的消息会以数组的形式存放。因此,在 web-view 的 message 事件回调中,接收到的 event.detail.data 的值是一个数组。

另外需要注意的是 @message事件的触发时机:网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。在执行postMessage时,@message的事件是不会马上执行的,也就是说它不是实时通讯,只有在触发了小程序后退、组件销毁、分享这三种情况之一才会接收到postMessage传递过来的参数

处理思路

以后退为例(后退是指小程序的页面后退)

使用webview实现小程序本地文件上传_第4张图片

<template>  
    <view>  
        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleMessage(evt) { 
            		
                console.log('接收到的消息:' + JSON.stringify(evt.detail.data));  
            }  
        }  
    }
</script>

你可能感兴趣的:(小程序,前端)