微信小程序云存储(文件上传到云端)
微信小程序云存储(文件上传到云端)
小程序云存储实现文件上传
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.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
wx.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 path
console.log(res.tempFilePath)
},
fail: err => {
// handle error
}
}) deleteFile(fileList: string[])接口删除云端文件的示例代码如下：
wx.cloud.deleteFile({
fileList: ['a7xzcb'],
success: res => {
// handle success
console.log(res.fileList)
},
fail: err => {
// handle error
},
complete: res => {
// ...
}
})腾讯云开发者
