在小程序開(kāi)發(fā)開(kāi)發(fā)中,可能會(huì)遇到需要上傳文件的場(chǎng)景,用戶(hù)需要從手機(jī)文件管理器中選擇文件,然后上傳到服務(wù)器.但是微信小程序只支持選擇回話(huà)中的文件,無(wú)法從手機(jī)中選擇.而且此api只支持微信端,不支持企業(yè)微信端.
image.png
我們可以通過(guò)小程序的web-view實(shí)現(xiàn).通過(guò)html的<input>實(shí)現(xiàn)文件上傳.
web-view使用注意事項(xiàng):
- 小程序web-view 不支持本地路徑,只支持遠(yuǎn)程鏈接,鏈接必須在小程序管理后臺(tái)配置業(yè)務(wù)域名;
- web-view加載需要在單個(gè)頁(yè)面顯示,而且會(huì)鋪滿(mǎn)屏幕,不支持局部渲染.
參數(shù)傳遞: (以下演示基于uni-app)
- 小程序 --> web-view
通過(guò)鏈接拼接參數(shù)的方式傳遞.
<template name="input">
<view>
<web-view @message="handleMessage" :src="src()"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
pageUrl: '', // 頁(yè)面地址
uploadUrl: '', //文件上傳地址
}
},
methods: {
src() {
return `${this.pageUrl}?url=${this.uploadUrl}`
},
}
}
</script>
接收參數(shù):
<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 --> 小程序
傳遞的參數(shù)必須通過(guò)data:{}返回,data中的參數(shù)的值必須是字符串類(lèi)型.
wx.miniProgram.postMessage({
data: {
fileName: res.data.fileName,
fileUrl: res.data.url
}
})
接收參數(shù):
網(wǎng)頁(yè)向小程序 postMessage 時(shí)酷宵，會(huì)在特定時(shí)機(jī)（小程序后退饺藤、組件銷(xiāo)毀礼殊、分享）觸發(fā)并收到消息哥攘。
小程序觸發(fā)bindmessage事件
html頁(yè)面:
調(diào)用參數(shù)傳遞后,關(guān)閉頁(yè)面(wx.miniProgram.navigateBack())觸發(fā)接收參數(shù)事件
wx.miniProgram.postMessage({
data: {
fileName: res.data.fileName,
fileUrl: res.data.url
}
})
setTimeout(() => {
wx.miniProgram.navigateBack()
}, 500)
小程序頁(yè)面:
<web-view @message="handleMessage" :src="src()"></web-view>
...
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
}
...
完整代碼分享:
image.png
小程序頁(yè)面:
<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', //頁(yè)面地址
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頁(yè)面:
<!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 如果不需要兼容小程序，則無(wú)需引用此 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">上傳進(jìn)度: {{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">選擇文件開(kāi)始上傳</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 = '請(qǐng)選擇文件';
return false;
} else {
let param = new FormData(); //創(chuàng)建form對(duì)象
param.append('file', files[0], files[0].name); //通過(guò)append向form對(duì)象添加數(shù)據(jù)
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) { //原生獲取上傳進(jìn)度的事件
if (progressEvent.lengthComputable) {
//屬性lengthComputable主要表明總共需要完成的工作量和已經(jīng)完成的工作是否可以被測(cè)量
//如果lengthComputable為false膀值，就獲取不到progressEvent.total和progressEvent.loaded
upLoadProgress = progressEvent.loaded / progressEvent.total * 100 //實(shí)時(shí)獲取上傳進(jìn)度
}
}
}).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>
