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('上传到服务器')
			}
		}
	})
}

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