微信小程序云开发-云存储-上传文件(word/excel/ppt/pdf)到云存储
说明 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)到云存储的更多相关文章
- 微信小程序云开发-云存储-上传文件(图片/视频)到云存储 精简代码
说明 图片/视频这类文件是从客户端会话选择文件. 一.wxml文件添加if切换显示 <!--上传文件到云存储--> <button bindtap="chooseImg&q ...
- 微信小程序 springboot nginx 做图片存储 上传 浏览
微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- 微信小程序踩坑日记3——上传照片至服务器
0. 引言 主要解决将小程序端获取的图片保存在服务器上.亲测可用的服务端脚本. 1. 获取照片 通过wx.chooseImage()方法,获取到图片,使用wx.uploadFile()上传图片. wx ...
- 微信小程序云开发-云存储-下载并打开文件文件(word/excel/ppt/pdf)
一.wxml文件 1.写文本框,用来获取文件链接. 2.按钮,点击下载文件 <!-- 下载文件(word/excel/ppt/pdf等) --> <view class=" ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- Mac上微信小程序官方开发工具卡死的问题
Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...
- 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑
公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...
- 微信小程序快速开发
微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...
随机推荐
- 5G和AI机器人平台
5G和AI机器人平台 Qualcomm Launches 5G and AI Robotics Platform 高通技术公司(Qualcomm Technologies)周三推出了一款高级5G和人工 ...
- 采用MVC模式创建一个简单的javascript App
初次翻译,翻译的不好,还请见谅 JavaScript中最好的一部分之一,也可能是最糟糕的. 在HTML文档的头部添加一个开始和结束脚本标记,并在其中引入一些意大利面条式的代码,毫无疑问这是一种过分简单 ...
- ES6深拷贝与浅拷贝
今天小编和大家一起探讨js中深拷贝和浅拷贝,简单一点理解就是,对于引用数据类型,深拷贝是数据引用地址不同,在改变一个数据的时候,不会影响另一个数据.而浅拷贝刚好相反.两个数据引用的是同一个堆内存地址, ...
- Swapon交换空间: 缓解真实物理内存的压力
交换空间: 缓解真实物理内存的压力 交换空间: 缓解真实物理内存的压力 由硬盘的空间来组成 – 交换分区:以空闲分区充当的交换空间 1.格式化交换分区 [root@server0 /]# mkswap ...
- MySQL数据的高效检索
数据库操作中,常常需要完成既定数据的检索.少量数据存放在表中,只需使用基本的SQL语句即可检索得到.但当数据量较大时,受MySQL数据库底层实现原理的限制,缺省的SQL语句,检索效率较低. 例如:当执 ...
- AIOps:企业运维新力量!
摘要:企业运维需求及挑战,来看看华为AIOps如何解决! 本文分享自华为云社区<[云驻共创]AIOps?企业运维新力量!>,原文作者:启明. 国际惯例,我们先介绍一下AIOps的概念:AI ...
- 【模板】Noi-Linux 下的一些配置
Noi-Linux 下的一些配置(C++) vim 编程 来自远古的编程神器 针对网上其他博客的配置做了简化 配置 set t_Co=256 //开启256色模式 默认是16色 让你的vim更好看 s ...
- Ubuntu 之 Esc and CapsLK
Ubuntu 更换 CapsLK 和 ESC 内容如下 // vim .xmodmap !! No Caps Lock clear lock !! Make Caps_lock an escape k ...
- 16、linux下卸载oracle11gR2
提示:如果要再次安装, 最好先做一些备份工作,包括用户的登录脚本,数据库自动启动关闭的 脚本,和Listener自动启动的脚本,要是有可能连创建数据库的脚本也保存下来: 16.1.通过oracle自带 ...
- Java+Selenium 上传文件,点击选择“浏览文件”按钮,报错invalid argument
Java+Selenium 上传文件,点击选择"浏览文件"按钮,报错invalid argument 解决代码: Actions action=new Actions(driver ...