微信小程序上传文件功能实现
在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信端.
image.png
我们可以通过小程序的
web-view实现.通过html的<input>实现文件上传.
web-view使用注意事项:
- 小程序web-view 不支持本地路径,只支持远程链接,链接必须在小程序管理后台配置业务域名;
- web-view加载需要在单个页面显示,而且会铺满屏幕,不支持局部渲染.
参数传递: (以下演示基于uni-app)
- 小程序 --> 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>- 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
小程序页面:
<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>