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

微信小程序 同时被 3 个专栏收录
49 篇文章 0 订阅
15 篇文章 0 订阅
6 篇文章 0 订阅

安卓系统和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
headerHTTP 请求的 Header,Header 中不能设置 Referer
filePath指定文件下载后存储的路径
success接口调用成功的回调函数
fail接口调用失败的回调函数
complete接口调用结束的回调函数(调用成功、失败都会执行)

wx.openDocument()的属性如下:

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

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

说明
docdoc 格式
docxdocx 格式
xlsxls 格式
xlsxxlsx 格式
pptppt 格式
pptxpptx 格式
pdfpdf 格式

 

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

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值