【微信小程序】小程序实现文件的上传及预览，以PDF文件为例。

安卓系统和ios系统

    一开始被一篇ios预览PDF文件需要用到webview的博客给误导了，以为安卓预览文件需要调用wx.downloadFile()和wx.openDocument()这两个API，而ios系统预览文件则是要用webview标签才能实现，最后捣鼓了好长时间ios用webview 标签预览文件的时候一直显示空白。不知道为什么(至今也没能解决)，官方给出的答案是webview不能直接预览文件(也没搞明白嘛意思?)。

    所以，记住了安卓和ios预览文件的时候都可以直接调用wx.downloadFile()和wx.openDocument()这两个API就可以了，千万别再看那个什么ios预览文件需要用webview才能实现的帖子了。(全是误导你的)

上传

    wx.chooseMessageFile({
      count: 1,     //能选择文件的数量
      type: 'file',   //能选择文件的类型,我这里只允许上传文件.还有视频,图片,或者都可以
      success(res) {
        var size = res.tempFiles[0].size;
        var name = res.tempFiles[0].name;
        var temporaryPdfArr = [];
        temporaryPdfArr.push(res.tempFiles[0]);
        var filePath = res.tempFiles[0].path;
        var newfilename = name + "";
        if (size > 10485760 || newfilename.indexOf(".pdf") == -1) { //限制了文件的大小和具体文件类型
          wx.showToast({
            title: '文件大小不能超过10MB,格式必须为pdf！',
            icon: "none",
            duration: 2000,
            mask: true
          })
        } else {
          wx.showLoading({
            title: '上传中...',
            mask: true,
          });
          var formData = {   //打开PDF文件所需传入的data
            user_id: app.globalData.uid,
            type: 'question',
            name: name,
          }
          wx.uploadFile({
            url: config.DOMAIN_API.upFilePdf,          //上传的路径
            filePath: filePath,   //刚刚在data保存的文件路径
            formData: formData,
            name: 'file',            //后台获取的凭据
            success(res) {
              var fileBackDa = JSON.parse(res.data).data;
              var backPdfArr = [];
              backPdfArr.push(fileBackDa)
              wx.hideLoading(); //隐藏提示框
              //上传成功，push进pdfFrontEnd便于前台展示
              that.setData({
                pdfFrontEnd: that.data.pdfFrontEnd.concat(temporaryPdfArr),
                pdfBackEnd: that.data.pdfBackEnd.concat(backPdfArr)
              });
            }
          })
        }
      }
    })

预览本地文档

//预览本地文档
wx.chooseMessageFile({
	count: 1,     //能选择文件的数量
	type: 'file',   //能选择文件的类型,我这里只允许上传文件.还有视频,图片,或者都可以
	success(res) {
		let filePath = res.tempFiles[0].path; //微信临时文件路径
		wx.openDocument({
			filePath: filePath,
            showMenu: false,  //是否显示右上角菜单按钮  默认为false
			success: function (res) {
				console.log('打开本地文档成功')
			},
			fail: function(error){
				console.log("打开本地文件失败")
			}
		})
	}
})

 预览网络文档

//预览网络文档
wx.downloadFile({
	url: 'http://example.com/somefile.pdf', // url，并非真实存在
	success: function (res) {
		let filePath = res.tempFiles; //微信临时文件路径
		wx.openDocument({
			filePath: filePath, 
            showMenu: false,  //是否显示右上角菜单按钮  默认为false
			success: function (res) {
				console.log('打开网络文档成功')
			},
			fail: function(error){
				console.log("打开网络文档失败")
			}
		})
	}
})

   注释：web-view下暂不支持此API 

wx.downloadFile()的属性如下：

属性	说明
url	下载资源的 url
header	HTTP 请求的 Header，Header 中不能设置 Referer
filePath	指定文件下载后存储的路径
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

wx.openDocument()的属性如下：

属性	说明
filePath	文件路径，可通过 downloadFile 获得
fileType	文件类型，指定文件类型打开文件
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

wx.openDocument()打开的文件格式有：

值	说明
doc	doc 格式
docx	docx 格式
xls	xls 格式
xlsx	xlsx 格式
ppt	ppt 格式
pptx	pptx 格式
pdf	pdf 格式

 备注：此上仅代表我自己的个人看法，有不足的地方还望告知。此后加油更正！