说明 图片/视频这类文件是从客户端会话选择文件。

一、wxml文件添加if切换显示

<!--上传文件到云存储-->
<button bindtap="chooseImg" type="primary" >上传单张图片</button>
<button bindtap="chooseVideo" type="primary" >上传单个视频</button>
<view class="myFile">
<image wx:if="{{showImage}}" src="{{imageUrl}}"></image>
<video wx:if="{{showVideo}}" src="{{videoUrl}}"></video>
</view>

二、wxss文件

.myFile{
margin: 30rpx auto;
text-align: center;
} button{
margin: 30rpx;
}

三、js文件

1、定义data

初始值赋值,定义图片和视频初始的显示状态(都隐藏不显示)

  data:{
//默认图片和视频都不显示
showImage:false,
showVideo:false
},

2、上传图片和上传视频的代码整合

将uploadImg()和uploadVideo()整合成uploadFile()

uploadFile(tempFile,fileName,type){    //传递三个参数,tempFile是所选文件的临时路径,fileName是上传到云存储的cloudPath的值,type表示上传的文件类型(1表示上传图片,2表示上传视频)
console.log("要上传文件的临时路径",tempFile)
let timestamp = (new Date()).valueOf()
wx.cloud.uploadFile({
cloudPath: fileName, //云存储的路径
filePath: tempFile, // 文件路径
}).then(res => {
console.log("上传成功",res)
wx.showToast({
title: '上传成功',
icon:"success",
duration:2000
})
let that = this
if(type==1){
setTimeout(function(){
that.setData({
imageUrl:res.fileID,
showImage:true, //显示图片
showVideo:false //隐藏视频
})
},2000)
}else if(type ==2){
setTimeout(function(){
that.setData({
videoUrl:res.fileID,
showImage:false,
showVideo:true
})
},2000)
} })
.catch(err => {
console.log("上传失败",err);
})
}

3、在chooseImg()函数和chooseVideo()函数中分别调用整合后的上传文件函数uploadFile()

1.在chooseImg()函数中调用uploadFile()

chooseImg(){
let that = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
console.log("选择成功",res);
wx.showLoading({
title: '上传中',
})
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths //调用uploadImg(tempFile)函数,实现图片上传功能
//that.uploadImg(tempFilePaths[0]) //调用uploadFile()实现上传文件功能
let timestamp = (new Date()).valueOf()
that.uploadFile(tempFilePaths[0],+timestamp+'.png',1) //传递三个参数
}
})
}

2.在chooseVideo()函数中调用uploadFile()

chooseVideo(){
let that = this
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
//console.log(res.tempFilePath);
console.log("----------",res.tempFilePath);
wx.showLoading({
title: '上传中',
})
//调用uploadImg(tempFile)函数,实现图片上传功能
//that.uploadVideo(res.tempFilePath) //调用uploadFile()实现上传文件功能
let timestamp = (new Date()).valueOf()
that.uploadFile(res.tempFilePath,+timestamp+'.mp4',2) //传递三个参数(第一个参数传递所选文件的临时路径,第二个参数传递云存储的路径,第三个参数传递上传文件的类型)
}
})
}

 四、最终效果

微信小程序云开发-云存储-上传文件(图片/视频)到云存储 精简代码的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 微信小程序快速开发

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

  7. 【微信小程序】开发实战 之 「配置项」与「逻辑层」

    微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...

  8. BeautyWe.js 一套专注于微信小程序的开发范式

    摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo ...

  9. Django微信小程序后台开发教程

    本文链接:https://blog.csdn.net/qq_43467898/article/details/83187698Django微信小程序后台开发教程1 申请小程序,创建hello worl ...

  10. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

随机推荐

  1. C++标准模板库(STL)——set常见用法详解

    set的定义 set<typename> name; typename可以是任何基本类型,如int.double.char.结构体等,也可以是STL标准容器,如vector.set.que ...

  2. 深入理解java虚拟机笔记补充-JVM常见参数设置

    JVM 常见参数设置 内存设置 参数 -Xms:初始堆大小,JVM 启动的时候,给定堆空间大小. -Xmx:最大堆大小,如果初始堆空间不足的时候,最大可以扩展到多少. -Xmn:设置年轻代大小.整个堆 ...

  3. Ckeditor 缺少图像源文件地址的解决 笨笨的人都看啦!

    Ckeditor 本文是关于CKEditor 无法上传图片问题的一个解决.我大致写了一下遇到问题的过程,问题的出处,怎么解决的,原因是什么. 希望能够帮到有需要的大家,有些时候找不到问题的答案,真的是 ...

  4. 【Linux进阶】使用grep、find、sed以及awk进行文本操作

    目录 一.元字符 二.grep命令 1. 过滤出包含某字符串的行 2. 过滤出以某字符串开头(结尾)的行 3. 过滤出包含某字符串及其相邻的行 4. 过滤出不包含某关键字的行 5. 过滤出包含多个字符 ...

  5. noip2006总结

    T1 能量项链 原题 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子 ...

  6. NOIP模拟测试30「return·one·magic」

    magic 题解 首先原式指数肯定会爆$long$ $long$ 首先根据欧拉定理我们可以将原式换成$N^{\sum\limits_{i=1}^{i<=N} [gcd(i,N)==1] C_{G ...

  7. 备份schema并排除大表到ASM磁盘上

    1.查出占用空间比较大的表 select owner,segment_name,segment_type,bytes/1024/1024 mb from dab_segment where owner ...

  8. 精通Proteus仿真器件制作(3)DLL仿真模型创建

    有些人可能会想:什么叫做"DLL仿真模型之原理图符号"?我想学高级的C++创建DLL(动态链接库)仿真模型的方式,你别拦着我,不然,我可就人挡Kill人,佛挡Kill佛啦!原理图符 ...

  9. 喜鹊开发者(The Magpie Developer)

    搬运文,原文地址:https://div.io/topic/1576 我经常感觉,开发人员很像我们所说的喜鹊,以不停的获取很多小玩意来装饰他们的窝而著称.就像喜鹊一样,开发人员通常都被定义为聪明的.好 ...

  10. Python如何设计面向对象的类(上)

    Python是一门高级语言,支持面向对象设计,如何设计一个符合Python风格的面向对象的类,是一个比较复杂的问题,本文提供一个参考,表达一种思路,探究一层原理. 目标 期望实现的类具有以下基本行为: ...