由于在手机上操作比较麻烦,现做一个兼容电脑版的上传下载文件;
一、主界面:
1.添加两个按钮
<button size="mini" @click="downFile">下载文件</button>
<button size="mini" @click="selectFile">导入文件</button>
2、下载文件( 电脑端用剪切板功能复制后去浏览器下载;手机端用小程序的uni.downloadFile 下载)
downFile(){
var _this = this
if(this.platform == 'windows' || this.platform == 'mac'){ //电脑端小程序
uni.setClipboardData({
data: `https://xx/xx/file/xx.xlsx`,
success: function (res) {
uni.getClipboardData({
success: function (res) {}
})
}
})
} else {
uni.downloadFile({
//代码片段
});
}
}
3、导入文件
判断环境,电脑端则跳转到webview界面
selectFile(){
var _this = this
if(this.platform == 'windows' || this.platform == 'mac'){ //电脑端小程序
uni.navigateTo({
url:'/pages/webview/file'
})
} else {
uni.chooseMessageFile({ // 只适应小程序(电脑端不支持)
count: 1,
type: 'file',
extension: ['xls', 'xlsx'],
success (result) {
const tempFilePaths = result.tempFiles
if (tempFilePaths.length > 0) {
// 选择文件成功
}else {
// 选择文件失败
}
}
})
}
}
4、监听fileInfo变化,h5中的数据放到主页面中
watch:{
'$store.state.fileInfo':{
handler:function(newVal,oldVal){
this.receiveInfo.push(...newVal)
},
}
},
二、webview页面:
单独写一个导入文件功能的h5页面,放到服务器用来嵌入到webview
<view class="content">
<web-view :src="url" @message="handlePostMessage"></web-view>
</view>
// 嵌入webview的链接
data() {
return {
url:'https://xx.cn/ftp/index.html?openId=xxxwwwbbb'
}
},
methods: {
handlePostMessage(e){
//对H5返回的数据做处理
console.log('e----',e.detail.data[0].res)
if(res.success){
const list = res.result
this.$store.state.fileInfo = list
} else {
uni.showToast({
title: res.message
icon: 'none',
duration: 1500
})
this.$store.state.fileInfo = []
}
}
}
三、h5页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上传文件</title>
<script
type="text/javascript"
src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"
></script>
<script
type="text/javascript"
src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
></script>
<style>
.btn_group {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.choose_container {
flex: 1;
padding: 10px 15px;
border: 1px solid #e4e4e4;
border-radius: 6px;
background-color: #fff;
color: black;
margin-right: 20px;
}
.upload_container {
flex: 1;
padding: 10px 15px;
border: 1px solid #e4e4e4;
border-radius: 6px;
background-color: #01b377;
color: white;
}
input[type='file'] {
display: none;
}
#list_container {
margin: 20px;
}
</style>
</head>
<body>
<div class="box_container">
<input type="file" name="upfile" id="upfile" />
<div class="btn_group">
<button class="choose_container">选择文件</button>
<button class="upload_container">上传文件</button>
</div>
<div id="list_container"></div>
</div>
<script>
var openId = window.location.search.split('=')[1];
// 文件上传后缀
var suffixList = [
'doc',
'docx',
'xls',
'xlsx',
'ppt',
'pptx',
'pdf',
];
// 选择文件
var chooseBtn =document.getElementsByClassName('choose_container')[0];
var upIpt = document.getElementById('upfile');
var list = document.getElementById('list_container');
chooseBtn.addEventListener('click', function () {
upIpt.click();
});
var upFileList;
upIpt.addEventListener('change', function (res) {
upFileList = res.target.files;
if (res.target.files.length > 0) {
list.innerText = res.target.files[0].name;
}
});
// 上传文件
var upBtn = document.getElementsByClassName('upload_container')[0];
upBtn.addEventListener('click', function () {
let fileName = upFileList[0].name;
let lastIndexOf = fileName.lastIndexOf('.') + 1;
//获取文件的后缀名 txt|...
let suffix = fileName.substring(lastIndexOf);
if (suffixList.includes(suffix)) {
let fd = new FormData();
fd.append('file', upFileList[0]);
fetch('https://xx.cn/xx/importExcel', {
method: 'POST',
body: fd,
headers: {
openId: openId
},
}).then((response) => response.json()).then((res) => {
wx.miniProgram.postMessage({
data: {
res: res,
},
});
wx.miniProgram.navigateBack({ delta: 1 });
}).catch((err) => {
console.log('fetch error', err);
});
} else {
console.log('文件上传格式不符合要求');
}
});
</script>
</body>
</html>