一、wxml文件

<!-- 上传、下载、打开文件一步执行 -->
<view class="handle">
<button bindtap="handleFile" type="primary">上传下载打开文件</button>
<text>实现文件的上传、下载、打开一步到位</text>
</view>

二、wxss文件

.handle{
margin: 200rpx 20rpx 0 20rpx;
text-align: center;
}

三、js文件

Page({
data:{
fileID :null
}, //功能:上传、下载、打开文件一气呵成
handleFile(){
//选择文件
let that = this
wx.chooseMessageFile({
count: 1,
type: 'all',
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
let tempFile = tempFilePaths[0]
that.uploadFile(tempFile.name,tempFile.path)
}
})
},
//上传文件
uploadFile(fileName,tempFile){
wx.cloud.uploadFile({
cloudPath:fileName,
filePath:tempFile,
})
.then(res=>{
console.log("文件上传成功",res);
//下载文件
wx.cloud.downloadFile({
fileID: res.fileID,
success: res => {
console.log("文件下载成功",res);
//打开文件
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('文件打开成功',res)
}
})
}
}) })
.catch(err=>{
console.log("文件上传失败",err);
}) }
})

四、实现效果

微信小程序云开发-云存储-上传、下载、打开文件文件(word/excel/ppt/pdf)一步到位的更多相关文章

  1. 微信小程序云开发-云存储-上传文件(word/excel/ppt/pdf)到云存储

    说明 word/excel/ppt/pdf是从客户端会话选择文件.使用chooseMessageFile中选择文件. 一.wxml文件 上传按钮,绑定chooseFile <!--上传文件(wo ...

  2. 微信小程序云开发-云存储-下载并打开文件文件(word/excel/ppt/pdf)

    一.wxml文件 1.写文本框,用来获取文件链接. 2.按钮,点击下载文件 <!-- 下载文件(word/excel/ppt/pdf等) --> <view class=" ...

  3. 微信小程序从零开始开发步骤(七)引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  4. 微信小程序 springboot nginx 做图片存储 上传 浏览

    微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...

  5. 微信小程序选择视频,视频上传,视频播放

    请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...

  6. 微信小程序踩坑日记3——上传照片至服务器

    0. 引言 主要解决将小程序端获取的图片保存在服务器上.亲测可用的服务端脚本. 1. 获取照片 通过wx.chooseImage()方法,获取到图片,使用wx.uploadFile()上传图片. wx ...

  7. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  8. 微信小程序从零开始开发步骤(六)4种页面跳转的方法

    用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...

  9. 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...

随机推荐

  1. NVIDIA Turing Architecture架构设计(下)

    NVIDIA Turing Architecture架构设计(下) GDDR6 内存子系统 随着显示分辨率不断提高,着色器功能和渲染技术变得更加复杂,内存带宽和大小在 GPU 性能中扮演着更大的角色. ...

  2. 硬核!2w 字长文爆肝分布式事务知识点!!

    前言 分布式事务,是分布式架构中一个绕不开的话题,而什么是分布式事务?为什么要使用分布式事务?分布式事务有哪些实现方案?更是面试时面试官特别喜欢的一个分布式三连炮!同时用XMind画了一张导图记录分布 ...

  3. spring如何集成第三方框架? 比如mybatis

    实体Bean的创建: 1: 基于class构建, 2: 构造方法构建 3: 静态工厂方法创建 4: FactoryBean构建 spring如何集成第三方框架? 比如mybatis 在mybatis中 ...

  4. 01:HTTP协议

    软件开发架构 cs  客户端 服务端bs  浏览器 服务端ps:bs本质也是cs 浏览器窗口输入网址回车发生了几件事 """ 1 浏览器朝服务端发送请求 2 服务端接受请 ...

  5. Boost 矩形布尔运算

    本文主要介绍boost库中矩形布尔运算的思路和代码解析.在此感谢Intel对开源事业的贡献. 基本概念 图形的插入 所有的操作的第一步都是进行图形的插入,我们需要声明定义好我们要使用的图形类型,以矩形 ...

  6. 「模拟8.19 A嚎叫..(set) B主仆..(DFS) C征程..(DP+堆优化)」

    为啥这一套题目背景感到很熟悉. T1  嚎叫响彻在贪婪的厂房 考试一个小时没调出来,自闭了.......... 正解很好想,最后实在打不出来了只好暴力骗分了... 联想到以前做的题:序列(涉及质因数分 ...

  7. 测试开发之网络篇-IP地址

    IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异.这里介绍一下目前广泛使用的IPv4版本. IP地址使用一种统一的格式,为互联 ...

  8. redis学习第二天

    Redis 在 2.8.9 版本之后添加了 HyperLogLog 结构 Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非常 ...

  9. Fiber 树的构建

    我们先来看一个简单的 demo: import * as React from 'react'; import * as ReactDOM from 'react-dom'; class App ex ...

  10. nginx服务跳转

    1.什么是页面跳转 将URL信息做改变 将URI信息做改变 完成伪静态配置 2.实现页面跳转的方法 http://nginx.org/en/docs/http/ngx_http_rewrite_mod ...