小さなプログラムの開発では, ファイルをアップロードする必要があるシナリオがあるかもしれません. ユーザーは携帯電話のファイルマネージャーからファイルを選択してサーバーにアップロードする必要があります. ただし, WeChatの小さなプログラムはセッションでのファイルの選択のみをサポートしています. 、携帯電話からは選択できません。また、この API は WeChat のみをサポートし、エンタープライズ WeChat はサポートしません。
画像.png
アプレットの web-view で実現できますが、ファイルのアップロードはhtmlの<input>で実現しています。
Web ビューを使用する場合の注意事項:
- アプレットの Web ビューは、ローカル パスをサポートせず、リモート リンクのみをサポートします。リンクは、アプレット管理のバックグラウンドでビジネス ドメイン名を使用して構成する必要があります。
- Web ビューの読み込みは 1 つのページに表示する必要があり、画面いっぱいに表示され、部分的なレンダリングはサポートされません。
パラメーターの受け渡し: (次のデモは uni-app に基づいています)
- 小さなプログラム --> Web ビューは、
リンク スプライシング パラメーターを介して渡されます。
<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>- web-view -->アプレット
から渡されるパラメーターはdata:{} を介して返される必要があり、data 内のパラメーターの値は文字列型である必要があります。
wx.miniProgram.postMessage({
data: {
fileName: res.data.fileName,
fileUrl: res.data.url
}
})パラメーターの受信:
Web ページがメッセージをアプレットにポストすると、特定の時間 (アプレットのバックアップ、コンポーネントの破棄、共有) でメッセージをトリガーして受信します。ミニ プログラムは、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));
}
...完全なコード共有:
画像.png
ミニプログラムページ：
<template name="input">
<view>
<web-view @message="handleMessage" :src="src()"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
pageUrl: 'http://test.com/upload.html', //页面地址
uploadUrl: 'http://test.com/upload', //文件上传接口地址
}
},
methods: {
src() {
return `${this.pageUrl}?url=${this.uploadUrl}&accessToken=${this.accessToken}`
},
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
this.$bus.$emit("fileUpload", evt.detail.data)
}
}
}
</script>
<style>
</style>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 id="app">
<p style="margin-top: 20px;" id="status"></p>
<p v-if="upLoadProgress > 0">上传进度: {
{upLoadProgress}}%</p>
<a href="javascript:;" class="file gradient">选择文件
<input id="upload" type="file" name="upload" @change="changeExcel($event)">
</a>
<p style="color: #ccc; font-size: 12px;" id="content">选择文件开始上传</p>
</div>
</body>
<script>
function viewPort() {
const meta = document.querySelector('meta[name="viewport"]');
const scale = window.screen.width / 375 < 1 ? 1 : window.screen.width / 375;
meta.content = `width=device-width,initial-scale=${scale}`
}
viewPort()
window.onresize = viewPort;
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');
var accessToken = getUrlParam('accessToken');
new Vue({
el: '#app',
data: {
imgPath: '',
upLoadProgress: 0,
},
components: {
},
methods: {
changeExcel(ev) {
const files = ev.target.files;
console.log(ev, files);
if (files.length < 0) {
document.getElementById("status").innerHTML = '请选择文件';
return false;
} else {
let param = new FormData(); //创建form对象
param.append('file', files[0], files[0].name); //通过append向form对象添加数据
let fileReader = new FileReader()
console.log("get uploadUrl:", uploadUrl);
console.log("get uploadUrl:", accessToken);
axios({
url: uploadUrl,
method: 'POST',
data: param,
headers: {
Authorization: accessToken
},
onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
if (progressEvent.lengthComputable) {
//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
//如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
upLoadProgress = progressEvent.loaded / progressEvent.total * 100 //实时获取上传进度
}
}
}).then(
res => {
if (res.data && res.data.code == 200) {
console.log("get res:", res);
document.getElementById("status").innerHTML = '上传成功';
wx.miniProgram.postMessage({
data: {
fileName: res.data.data.fileName,
fileUrl: res.data.data.url
}
})
setTimeout(() => {
wx.miniProgram.navigateBack()
}, 500)
}
}, error => {
document.getElementById("status").innerHTML = '上传失败';
})
}
}
}
})
</script>
</html>