uni-app微信小程序实现pdf、word等格式文件上传到服务器,本地预览pdf文件

uni-app微信小程序实现pdf、word等格式文件上传到服务器,本地预览pdf文件

如何简单的写出一个涵盖核心的标题呢?难~,不浪费那个时间了,把功能实现才是主要的,下面我们分享一下如何在uni-app开发的微信小程序中实现,word,pdf等文件上传到服务器呢? 又是如何实现本地预览文件的呢?下面我依依来分享一下。

一、微信小程序上传文件

1、准备工作

微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

⚠️注意: 目前微信只支持从聊天记录里面获取文件

  • 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等.
  • 获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传.

2、功能实现代码

下面我会详细的分享每个步骤的代码,嫌麻烦的跳过即可。

这是一个上传的按钮

<view class="uploadBtn" @click="selectFile">
    <text class="iconfont wx__icon">&#xe675;</text>
     手机上传附件简历(微信)
</view>

点击事件

selectFile(){
	if(this.pdfInfo.length != 0){ //this.pdfInfo 这个是页面进来获取的油污上传过文件,要求不可重复上传
		this.$uniApi.tipMsg('如果重新上传请先删除已有的简历附件~')
		return
	}
	let _that = this
	wx.chooseMessageFile({
		count: 10, //最多可以选择的文件个数,可以 0~100
		type: 'file', //所选的文件的类型,具体看官方文档
		success (res) {
			// tempFilePath可以作为img标签的src属性显示图片
			const tempFilePaths = res.tempFiles[0].path
			let filename = res.tempFiles[0].name; //用于页面显示的名字
		        // 这一步判断可以省略,如果需求没有格式要求的话
			if(filename.indexOf(".pdf")==-1){
				_that.$uniApi.tipMsg('暂时仅支持pdf格式的文件')
				return
			} else {
				console.log("开始上传")
				wx.uploadFile({
					url: '这里是您后台提供文件上传的API',   //上传的路径
					filePath: tempFilePaths, //刚刚在data保存的文件路径
					name: 'file',   //后台获取的凭据
					formData:{ //如果是需要带参数,请在formData里面添加,不需要就去掉这个就可以的
						"userId": 1,
						"fileName": filename
					},
					success(res) { 
						console.log(res)
						// TO_DO
						// data: "{"code":"00000","msg":"成功","count":null,"data":true}"
						// if(res.data.code != "00000"){
						// 	this.errTips(res.data.msg)
						// 	return
						// }
						_that.getUserFile()//上传成功后,用于页面展示,所以在此在服务器拉取一次文件展示前端
					}
				})
				console.log('上传到服务器')
			}
		}
	})
}

上面分享了整个上传过程中详细的代码,几乎每个步骤都注释了,如果还有看不明白的可以联系我。

二、 微信小程序本地预览pdf文件

文件上传到服务器后,我们前端怎么实现本地预览呢?其实之前也分享过一篇相关文章的《 uni-app 微信小程序中打开预览pdf文件 》这里就不做分享了,直接去查看上面的这个文章,详细的记录了如果本地预览,以及遇到的bug和解决方法。

 

分享一下有关微信小程序和uni-app的不错的课程给大家吧

1、 《 uni-app实战直播app全栈开发 》 百度网盘

2、《 uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码) 》完整无秘

3、《 微信小程序入门与实战(全新版)2020版 》 百度网盘

⚠️:当天下载多套可以找客服微信: ITBOKE, 索取优惠价哦

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(4) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?