1、云存储

我们直到，云开发控制台更多的是对项目中的初始文件的操作管理，例如项目的Logo图片可以通过云开发控制台提起上传到云端。项目在执行的过程中也会涉及文件的操作，例如用户上传图片的操作，这时就需要用到云开发存储API。

小程序云开发提供了一系列存储操作API，有uploadFile()文件上传接口、downloadFile()下载文件接口、deleteFile()删除文件接口和getTempFileURL()换取临时链接接口。

wx.cloud.uploadFile()接口的参数列表如下所示。如果采用callback风格，调用回调函数success、fail、complete中的任何一个，则会返回一个UploadTask对象(封装返回信息的对象)，通过UploadTask对象可监听上传事件。

字段	说明	数据类型	默认值	必填
cloudPath	云存储路径，命名限制见文件名命名限制	String	-	Y
filePath	要上传文件资源的路径	String	-	Y
config	配置	Object	-	N
success	成功回调
fail	失败回调
complete	结束回调

config 对象定义

字段	说明	数据类型
env	使用的环境 ID，填写后忽略 init 指定的环境	String

success 返回参数

字段	说明	数据类型
fileID	文件 ID	String
statusCode	服务器返回的 HTTP 状态码	Number
errMsg	错误信息，格式 uploadFile:ok	String

fail 返回参数

字段	说明	数据类型
errCode	错误码	Number
errMsg	错误信息，格式 uploadFile:fail msg	String

返回值

如果请求参数中带有 success/fail/complete 回调中的任一个，则会返回一个 UploadTask 对象，通过 UploadTask 对象可监听上传进度变化事件，以及取消上传任务。

2、云存储上传文件示例

2.1 wx.cloud.uploadFile()接口测试

小程序端uploadFile.wxml代码如下：

<!--index.wxml-->
<view class="container"><!-- 用户 openid --><view class="userinfo"><button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"class="userinfo-avatar"style="background-image: url({{avatarUrl}})"></button><view><button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button></view></view><!-- 上传图片 --><view class="uploader"><view class="uploader-text" bindtap="doUpload"><text>上传图片</text></view><view class="uploader-container" wx:if="{{imgUrl}}"><image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image></view></view></view>

uploadFile.js

//index.js
const app = getApp()Page({data: {avatarUrl: './user-unlogin.png',userInfo: {},logged: false,takeSession: false,requestResult: ''},onLoad: function() {if (!wx.cloud) {wx.redirectTo({url: '../chooseLib/chooseLib',})return}},// 上传图片doUpload: function () {// 选择图片wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function (res) {console.log(res)wx.showLoading({title: '上传中',})const filePath = res.tempFilePaths[0]var timestamp = (new Date()).valueOf();//新建日期对象并变成时间戳wx.cloud.uploadFile({cloudPath: "img/"+timestamp+".jpg", // 上传至云端的路径filePath: filePath, // 小程序临时文件路径success: res => {console.log('[上传文件] 成功：', res)app.globalData.fileID = res.fileIDapp.globalData.cloudPath = cloudPathapp.globalData.imagePath = filePathwx.navigateTo({url: '../storageConsole/storageConsole',})},fail: e => {console.error('[上传文件] 失败：', e)wx.showToast({icon: 'none',title: '上传失败',})},complete: () => {wx.hideLoading()}})},fail: e => {console.error(e)}})},})

代码讲解：本例先调用了wx.chooseImage()接口选择一幅图片，然后调用wx.cloud.uploadFile()接口上传图片到云端。cloudPath字段是上传文件在云端的文件名字，为了不重复，这里采用了当前时间戳来命名云端文件名。filePath字段是本地文件的路径，它的值取wx.chooseImage()接口的回调参数res.tempFilePaths[0]。

示例效果如下：

点击上传图片，并选择一张图片上传。

上传完毕后取云开发控制台中查看是否上传成功

上传成功，没有任何的问题。

2.2 其他接口

wx.cloud.downloadFile()接口从云存储空间下载文件的示例代码如下：

wx.cloud.downloadFile({fileID: 'a7xzcb',success: res => {// get temp file pathconsole.log(res.tempFilePath)},fail: err => {// handle error}
})

deleteFile(fileList: string[])接口删除云端文件的示例代码如下：

wx.cloud.deleteFile({fileList: ['a7xzcb'],success: res => {// handle successconsole.log(res.fileList)},fail: err => {// handle error},complete: res => {// ...}
})

微信小程序云存储(文件上传到云端)相关推荐

微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...
mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
uniapp微信小程序选择聊天记录文件上传
目录精简版总结示例容易踩的坑 1.页面刷新问题 2.extension问题精简版总结单文件 wx.chooseMessageFile({count: 1,//限制选择的文件数量type: ' ...
微信小程序开发之——文件上传
一概述将录像的结果传递给服务器,服务端提供的接口文档为: 字段名称字段类型字段说明必填项示例 token String token 是服务器下发的token(header) file F ...
微信小程序云多图上传并存储路径到云数据库【二】
先来看最终效果: 一: 写一个简单的界面,主要是利用小程序上传文件api接口来实现:
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...
【微信小程序】大文件上传

微信小程序云存储(文件上传到云端)

小程序云存储实现文件上传

1、云存储

2、云存储上传文件示例

2.1 wx.cloud.uploadFile()接口测试

2.2 其他接口

微信小程序云存储(文件上传到云端)相关推荐

最新文章

热门文章