微信小程序云开发实现上传文件和预览下载文件

2024-05-30 06:16:24

微信小程序云开发实现上传文件和预览下载文件

一.前言

目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等。

获取这些信息再结合微信云开发提供的上传接口wx.cloud.uploadFile,即可实现文件上传。
下载需要微信提供的wx.downloadFile，预览需要微信提供的wx.openDocument，还需要wx.cloud.getTempFileURL，具体可看微信开发文档。

二.具体实现

首先需要两个按钮来调用wx.chooseMessageFile和wx.cloud.getTempFileURL方法。wx.cloud.uploadFile根据wx.chooseMessageFile获得所需的参数，上传文件。

  uploadfile: function(){var that = thiswx.chooseMessageFile({count: 1,//能选择文件的数量type: 'file',//能选择文件的类型,我这里只允许上传文件.还有视频,图片,或者都可以success(res) {//文件临时路径const tempFilePaths = res.tempFiles[0].path//后缀名的获取const houzhui = tempFilePaths.match(/\.[^.]+?$/)[0];//存储在云存储的地址const cloudpath = 'word/' + new Date().getTime() + houzhui;//获取fileIDwx.cloud.uploadFile({cloudPath: cloudpath,filePath: tempFilePaths,success: res => {//存储fileID，之后用的到that.setData({fileid:res.fileID})},fail: err => {console.log(err)},})}})},

我们可以根据获得的fileID来通过wx.cloud.getTempFileURL去获得云存储的文件，然后再调用wx.downloadFile和wx.openDocument去实现预览。

openfile:function(){var fileid = this.data.fileid;var that = this;wx.cloud.getTempFileURL({fileList: [fileid],success: res => {that.setData({//res.fileList[0].tempFileURL是https格式的路径，可以根据这个路径在浏览器上下载imgSrc: res.fileList[0].tempFileURL});//根据https路径可以获得http格式的路径(指定文件下载后存储的路径 (本地路径)),根据这个路径可以预览wx.downloadFile({url: that.data.imgSrc,success: (res) => {that.setData({httpfile: res.tempFilePath})//预览文件wx.openDocument({filePath: that.data.httpfile,success: res => {},fail: err => {console.log(err);}})},fail: (err) => {console.log('读取失败', err)}})},fail: err => {console.log(err);}})}

三.结尾

如果觉得这篇文章对你有用的话,不要忘记评论点赞哦！

微信小程序云开发实现上传文件和预览下载文件相关推荐

mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...
微信小程序云开发实现一对一即时聊天，发送语音、文件、图片、朋友圈、添加好友等功能
点此源码获取前几篇博文前几篇文章实现了,利用云开发的即时通信demo做的仿照微信好友聊天. 本篇文章主要在前几篇的基础上进行的修改,实现即时一对一聊天,群聊天,发送文件图片,发送语音,更换聊天背 ...
微信小程序云多图上传并存储路径到云数据库【二】
先来看最终效果: 一: 写一个简单的界面,主要是利用小程序上传文件api接口来实现:
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"><image src="{{user ...
微信小程序云开发CMS内容管理平台csv上传乱码或失败的解决方法
一.新建Excel并编辑数据: 二.Excel 编辑好后另存为csv文件(直接导入微信小程序云开发数据库会出现中文乱码): 三.csv文件直接改后缀名为.txt,然后用记事本打开(如首行出现空字段需删 ...
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...

最新文章

热门文章