抖音微信小程序中上传和下载任意类型文件笔记
最近项目中有个需求，微信和抖音小程序可以上传和下载保存任意类型文件的需求，但是不管是微信还是抖音小程序，他们默认只能上传图片或视频，没有上传任意文件的api，那怎么办呢，只能通过webview调用h5中的input file来上传任意文件，我们以抖音小程序的h5为例：
当抖音小程序需要上传任意类型文件，例如pdf文件的时候，我们页面跳转到另外一个包含webview的page，webview指向一个可以上传pdf文件的h5页面，当用户在这个页面上传完后，就上传的文件url地址回调给抖音小程序的页面，整体的流程就是这样，下面是小程序的代码：
我们以uniapp的代码为例，可以自动转成小程序代码
<!-- pages/web/web.vue -->
<template>
<view class="container">
<web-view src="https://example.com/upload.html页面的完整url地址" @message="onMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(options) {
},
methods: {
onMessage(options) {
/**
* 网页的消息发出顺序为 postMessage1、postMessage2、postMessage3
*/
uni.setStorageSync("webviewpassdata",options.detail.data);//保存回调的值
console.log("onmessage：", options.detail.data);
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100vh;
}
</style>
upload.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<title>H5 上传</title>
<scrip...点击查看剩余70%
{{collectdata}}
网友评论