小程序上传各种文件，阅览多种格式（word,excel,ppt,pdf）文件
小程序上传各种文件，阅览多种格式（word,excel,ppt,pdf）文件
hotqin888
发布于 2020-06-28 11:20:35
发布于 2020-06-28 11:20:35
我们用小程序与网站交互，那么无非是上传文件，发布文章，阅览文件（主要是office和pdf）和文章。
服务端用engineercms，各种文件分类在网站上展示是这样的：
可见，有文章，有附件——word格式等，有pdf格式。
小程序支持阅览多种office格式文件
官方列出有：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
doc | doc 格式 | |
|---|---|---|
docx | docx 格式 | |
xls | xls 格式 | |
xlsx | xlsx 格式 | |
ppt | ppt 格式 | |
pptx | pptx 格式 | |
pdf 格式 |
所以就可以将服务端混排的各种附件和文章进行混排展示出来，如下图：
当点击文件时，就跳转到文件阅览页，当点击文章时候，就跳转到文件详情页。
小程序列表 模板切换用官方下面的代码
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>各种文件扩展名用下面这个工具制作了图标：
https://github.com/joaner/namedavatar
小程序代码：
js
//直接查看各种文件
downloadFile: function (e) {
wx.showLoading({
title: '加载中...',
})
var that = this;
if (that.data.standardFocus) {
that.setData({
downloadurl: config.url + '/wx/wxstandardpdf/' + e.currentTarget.dataset.id,
});
} else {
that.setData({
downloadurl: config.url + '/wx/getwxpdf/' + e.currentTarget.dataset.id,
});
};
var sessionId = wx.getStorageSync('sessionId')
//发起网络请求
wx.downloadFile({
url: that.data.downloadurl + '?hotqinsessionid=' + sessionId,
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function (res) {
console.log(res.tempFilePath)
const filePath = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
wx.openDocument({
filePath: filePath,
fileType: e.currentTarget.dataset.type,
success: function (res) {
console.log('打开成功');
wx.hideLoading()
},
fail: function (res) {
// console.log(res);
wx.showToast({
title: res.data.info,
icon: 'loading',
duration: 1500
})
}
})
},
fail: function (res) {
console.log(res);
wx.showToast({
title: res.data.info,
icon: 'loading',
duration: 1500
})
},
})
},wxml
<template name="msgTemp">
<view class="weui-panel__bd">
<!-- <navigator class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> -->
<view class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb" src="{{Link}}" style="width: 60px; height: 60px;" style="border-radius: 100%" />
<!-- <wxc-avatar class="avatar">图</wxc-avatar> -->
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg" data-id="{{Id}}" data-type="{{Type}}" catchtap='downloadFile'>
<view class="weui-media-box__title">{{Title}}</view>
<view class="weui-media-box__desc">{{tutil.formatTime(Created)}}</view>
<view class="weui-media-box__desc">{{LiNumber}}</view>
</view>
<navigator class="weui-media-box__desc" url="../pdfview/pdfview?id={{Id}}&title={{Title}}&actIndex={{ActIndex}}&link={{Link}}&type={{Type}}">分享</navigator>
<!-- </navigator> -->
</view>
</view>
</template>
<!--用name 定义模版-->
<template name="article">
<view class='leassonList' data-id="{{Id}}" bindtap="seeDetail">
<view class='listIn'>
<view class='leassonImg'>
<image src="{{Link}}" class='leassonImgs' mode='aspectFill' />
<!-- <image class="weui-media-box__thumb" src="{{Link}}" style="width: 60px; height: 60px;" style="border-radius: 100%" /> -->
</view>
<view class='leassonTitle'>
<view class='title'>
{{Title}}
</view>
<view class='author'>
作者：{{Author}}
</view>
</view>
</view>
</view>
</template>
<view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
<view class="kind-list__item">
<!--用is 使用模版-->
<template is="{{item.Type=='isArticle'?'article':'msgTemp'}}" data="{{...item}}" />
</view>
</view>服务端engineercms返回数据为下所示：其中Link，当为文件时，用图标的base64，为文章时，用文章里的第一个图片。
{
"info": "SUCCESS",
"searchers": [
{
"Id": 15,
"Title": "珠三角工程模拟飞检设计整改报告和有关说明珠三角工程模拟飞检设计整改报告和有关说明.docx",
"Type": "docx",
"Link": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCBmaWxsPSIjRkY1NzIyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48L3JlY3Q+PHRleHQgZmlsbD0iI0ZGRiIgeD0iNTAlIiB5PSI1MCUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iNTAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSI+VzwvdGV4dD48L3N2Zz4=",
"Subtext": "",
"Author": "",
"Created": "2020-06-25T11:54:41.4978218Z",
"Updated": "2020-06-25T11:54:41.4978218Z"
},
{
"Id": 19,
"Title": "鲁班测试993",
"Type": "isArticle",
"Link": "http://127.0.0.1/attachment/LBGCB鲁班工程宝/质量监督/2020June/1593093898342607000.jpg",
"Subtext": "asdfasdfsadf",
"Author": "admin",
"Created": "2020-03-18T14:37:33.5387154Z",
"Updated": "2020-06-25T14:05:01.7747665Z"
}
]
}小程序上传各种文件：
小程序上传文件js：
//上传文件
uploadPDF(e) {
var that = this
that.setData({
uploadurl: config.url + '/admin/addwxattachment?pid=' + that.data.id,
});
wx.chooseMessageFile({
count: 10,
type: 'file',
success(res) {
const tempFilePaths = res.tempFiles
if (tempFilePaths.length > 0) {
wx.showLoading({
title: '上传中...',
})
//循环比较
for (var i = 0; i < tempFilePaths.length; i++) {
var imgUrl = tempFilePaths[i].path;
var filename = tempFilePaths[i].name;
var sessionId = wx.getStorageSync('sessionId')
//发起网络请求
wx.uploadFile({
//上传图片的网路请求地址
url: that.data.uploadurl + '&hotqinsessionid=' + sessionId,
//选择
filePath: imgUrl,
name: 'file',
formData: {
'filename': filename
},
success: function (res) {
wx.hideLoading();
if (res.data.info != "err") {
wx.showToast({
title: "上传成功",
icon: "none",
duration: 1500
})
// 加跳转
wx.navigateBack({
delta: 1,
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
})
} else {
wx.showToast({
title: "上传失败",
icon: "none",
duration: 1500
})
}
},
fail: function (res) {
wx.hideLoading();
wx.showToast({
title: "文件上传失败",
icon: "none"
})
}
});
}
}
}
})
},当然，上传按钮必须要做2个，一个是上传文件，一个是发布文章哦。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读