一、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. Comparison of Laser SLAM and Visual SLAM

    Comparison of Laser SLAM and Visual SLAM 目前,SLAM技术广泛应用于机器人.无人机.无人机.AR.VR等领域,依靠传感器可以实现机器的自主定位.测绘.路径规划 ...

  2. Java真的是白天鹅

    前言 我最近越来越真切的感受到,Java真的是白天鹅. 这真的是一种羡慕嫉妒恨的感受. 今天和一个Java技术Leader聊天,我告诉他敏捷开发是以人为本,他居然跟我说敏捷开发在行业内有规范,规范是死 ...

  3. MAT工具定位分析Java堆内存泄漏问题方法

    一.MAT概述与安装 MAT,全称Memory Analysis Tools,是一款分析Java堆内存的工具,可以快速定位到堆内泄漏问题.该工具提供了两种使用方式,一种是插件版,可以安装到Eclips ...

  4. java变量及常量

    变量 本质:就是代表一个"可操作的存储空间",空间位置是确定的,但是里面放置什么值不确定.我们可通过变量名来访问"对应的存储空间",从而操纵这个"存储 ...

  5. 20201123 实验一《Python程序设计》实验报告

    20201123 2020-2021-2 <Python程序设计>实验一报告 课程:<Python程序设计> 班级:2011班 姓名:晏鹏捷 学号:20201123 实验教师: ...

  6. Unity不规则按钮点击区域(UGUI)

    文章目录 一. 前言 二. 最终效果 三. 实现 1.创建UICamera 2. UIPolygon节点 3. 编辑碰撞区域 5. 运行测试 6. UIPolygon代码 一. 前言 游戏开发中,可能 ...

  7. Windows10上基于Visual Studio Code安装Golang开发环境

    GoLang简介 Go编程语言是一个开源项目,它使程序员更具生产力. Go语言具有很强的表达能力,它简洁.清晰而高效.得益于其并发机制,用它编写的程序能够非常有效地利用多核与联网的计算机,其新颖的类型 ...

  8. Vue 消除Token过期时刷新页面的重复提示

    1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...

  9. C#Expression合集

    一:总体概览 1:获取属性值: 2:调用方法 3:动态构造条件 4:创建对象 5:Switch Case 6:Try Catch 以及捕获异常信息并输出 7:if  esle 8:+  / += 9: ...

  10. hdu 6092 Rikka with Subset 01背包 思维

    dp[i][j]表示前i个元素,子集和为j的个数.d[i][j] = d[i][j] + d[i-1][j-k] (第i个元素的值为k).这里可以优化成一维数组 比如序列为 1 2 3,每一步的dp值 ...