说明 word/excel/ppt/pdf是从客户端会话选择文件。使用chooseMessageFile中选择文件。

一、wxml文件

上传按钮,绑定chooseFile

<!--上传文件(word/excel/ppt/pdf等)到云存储-->
<button bindtap="chooseFile" type="primary" >上传文件</button>

二、wxss文件

wxss设置按钮外边距

button{
margin: 30rpx;
}

三、js文件

实现文件选择和文件上传的功能

Page({
//功能:上传文件(word/excel/ppt/pdf等)到云存储 //第一步:选择文件
chooseFile(){
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上传选中的文件
uploadFile(fileName,tempFile){
wx.cloud.uploadFile({
cloudPath:fileName,
filePath:tempFile,
})
.then(res=>{
console.log("上传成功啦",res);
wx.showToast({
title: '文件上传成功',
icon:"success",
duration:2000
})
})
.catch(err=>{
console.log("上传失败啦",err);
})
} })

四、效果展示

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

  1. 微信小程序云开发-云存储-上传文件(图片/视频)到云存储 精简代码

    说明 图片/视频这类文件是从客户端会话选择文件. 一.wxml文件添加if切换显示 <!--上传文件到云存储--> <button bindtap="chooseImg&q ...

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

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

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

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

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

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

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

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

  6. 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  7. Mac上微信小程序官方开发工具卡死的问题

    Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...

  8. 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑

    公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...

  9. 微信小程序快速开发

    微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...

随机推荐

  1. 编写可调模板并使用Auto-tuner自动调谐器

    编写可调模板并使用Auto-tuner自动调谐器 本文介绍在TVM自动调谐模块. 自动调谐有两个步骤.第一步是定义搜索空间.第二步是运行一个搜索算法来探索这个空间.可以学习如何在TVM中执行这两个步骤 ...

  2. 孟老板 BaseAdapter封装 (二) Healer,footer

    BaseAdapter封装(一) 简单封装 BaseAdapter封装(二) Header,footer BaseAdapter封装(三) 空数据占位图 BaseAdapter封装(四) PageHe ...

  3. Spring Cloud08: Hystrix 容错机制与数据监控

    一.概述 容错机制是指的是在一个分布式系统中,每个微服务之间是相互调用的,并且他们之间相互依赖,而实际的运行情况中,可能会因为各种原因导致某个微服务不可用,那么依赖于这个微服务的其他微服务就可能出现响 ...

  4. 从Vehicle-ReId到AI换脸,应有尽有,解你所惑

    最近在做视频搜索的技术调研,已经初步有了一些成果输出,算法准确性还可以接受,基本达到了调研的预期.现将该技术调研过程中涉及到的内容总结一篇文章分享出来,内容比较多,初看起来可能关系不大,但是如果接触面 ...

  5. teprunner重磅更新Git打通PyCharm与测试平台

    经过Python测试交流群的小伙伴群策群力,teprunner添加了一个重要功能,把PyCharm中的代码,通过Git同步到测试平台中,生成测试用例.这样,teprunner就成了一个名副其实的pyt ...

  6. MySQL 全文索引实现一个简单版搜索引擎

    前言 只有Innodb和myisam存储引擎能用全文索引(innodb支持全文索引是从mysql5.6开始的) char.varchar.text类型字段能创建全文索引(fulltext index ...

  7. Oracle冷备

    概念:一致性的备份,也就是在数据库一致性关闭后做的备份,一般用:shutdown immediate方式关闭. 步骤:1.查看三大核心文件所在位置:数据文件,控制文件,日志文件 数据文件:select ...

  8. WEB安全漏洞扫描与处理(上)——安全漏洞扫描工具AppScan的安装使用

    很多公司对软件会有安全的要求,一般测试公司会使用安全漏洞扫描工具对软件进行漏扫,然后给出安全报告,然后软件开发人员会根据提供的安全报告进行漏洞的处理.我们接触到的测评公司,使用的是漏洞扫描工具AppS ...

  9. 快来为你的 .NET 应用加个监控吧!

    导读 CZGL.ProcessMetrics 是一个 Metrics 库,能够将程序的 GC.CPU.内存.机器网络.磁盘空间等信息记录下来,使用 Prometheus 采集信息,然后使用 Grafa ...

  10. Windows10 准备/安装React研发环境

    安装NodeJS环境,附带NPM 因为React依赖NPM(Node.js Package Manager)来安装,所以我们可以先安装Node.Js环境. Node.Js会自动带NPM组件和自动安装配 ...