前言

我们经常将文件（音频、图片、压缩包、文档）存储在网上，我们的云开发平台为开发者提供“云存储”空间，开发者只需将文件上传，就可以得到这个文件的下载地址和File ID。

一、云存储的使用

代码如下（示例）：

 wx.cloud.uploadFile({cloudPath:`上传的位置/$文件的命名`,filePath:临时文件路径,success(res){//成功后的回调},fail(res){//失败后的回调}})

二、使用演练

1.上传图片到云存储中

效果：

wxml示例：

<view class="group"><text>附加图片:</text><view class="img"><view class="img_row"><block wx:for="{{cloudImages}}" wx:key="index"><image class="img01" src="{{item}}"></image></block></view><image class="img01" src="../../static/camera.png" bindtap="imgFile"></image></view></view>

js代码示例：

 imgFile(){var that=thiswx.chooseImage({count:2, //上传图片最多不超2张success(res){/* console.log(res) */for(var i=0;i<res.tempFilePaths.length;i++){wx.cloud.uploadFile({cloudPath:`actionInfo/${Math.random()}_${Date.now()}.${res.tempFilePaths[i].match(/\.(\w+)$/)[1]}`,filePath:res.tempFilePaths[i],success(res){/* console.log(res) */that.data.cloudImages.push(res.fileID)that.setData({cloudImages:that.data.cloudImages})/* console.log(that.data.cloudImages) */}})}}})},

2.下载并保存图片到手机

代码如下（示例）：

downLoadImage(event){wx.cloud.downloadFile({fileID:event.currentTarget.dataset.id,success(res){wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(){wx.showToast({title: '保存成功',})}})}})},

tips:上边的链接下载地址时FileID,如果链接下载图片地址是url，则调用的API是：wx.downloadFile({url:})
wx.saveImageToPhotosAlbum:将图片保存到手机中

微信小程序云开发之云存储（实现图片上传和下载）相关推荐

微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能学习目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
微信小程序实现pdf、word等格式文件上传的方法，微信小程序word文档
目前微信只支持从聊天记录里面获取文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path ...
微信小程序实现pdf、word等格式文件上传的方法
前言微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等. 获取这些信息再结 ...
【小5聊】小程序之体验版本wx.chooseImage选择图片上传可以，而线上正式版本选择图片一闪而过的原因
[问题描述] 在提交版本审核前,已经在体验本测试过,通过wx.chooseImage这个微信api接口是可以上传图片的.审核通过后,通过使用线上正式版本,发现选择图片后,一闪而过,然后就没反应了. [ ...
DAY10微信小程序项目开发技术总结
一.每日实习任务 1．网页基础知识(html,css,js) 今天老师为我们介绍讲解了网页基础知识(html,css,js).首先,我们安装了谷歌浏览器及sublime text.老师为我们介绍了ht ...
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程小程序进阶王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
基于腾讯云开发微信小程序（新闻发布及共享平台）上
基于腾讯云开发微信小程序(新闻发布及共享平台)上文章目录传统的微信小程序开发一.云开发是什么? 二.使用步骤 1.创建云环境 2.云数据库的创建 3.云储存 4.云函数总结传统的小程序开发 ...

微信小程序云开发之云存储（实现图片上传和下载）

文章目录

前言

一、云存储的使用

二、使用演练

1.上传图片到云存储中

2.下载并保存图片到手机

微信小程序云开发之云存储（实现图片上传和下载）相关推荐

最新文章

热门文章