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

发布于

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

  • 1、云存储
  • 2、云存储上传文件示例
    • 2.1 wx.cloud.uploadFile()接口测试
    • 2.2 其他接口

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代码如下：

代码语言：javascript
复制
<!--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

代码语言：javascript
复制
//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: &#34;img/&#34;+timestamp+&#34;.jpg&#34;, // 上传至云端的路径
      filePath: filePath, // 小程序临时文件路径
      success: res =&gt; {
        console.log(&#39;[上传文件] 成功：&#39;, res)
        app.globalData.fileID = res.fileID
        app.globalData.cloudPath = cloudPath
        app.globalData.imagePath = filePath
        
        wx.navigateTo({
          url: &#39;../storageConsole/storageConsole&#39;,
        })
      },
      fail: e =&gt; {
        console.error(&#39;[上传文件] 失败：&#39;, e)
        wx.showToast({
          icon: &#39;none&#39;,
          title: &#39;上传失败&#39;,
        })
      },
      complete: () =&gt; {
        wx.hideLoading()
      }
    })

  },
  fail: e =&gt; {
    console.error(e)
  }
})



},


})

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

  示例效果如下：

image-20220323234604322

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

image-20220323234653326
image-20220323234754458

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

image-20220323234904307

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

2.2 其他接口

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

代码语言：javascript
复制
wx.cloud.downloadFile({
  fileID: 'a7xzcb',
  success: res => {
    // get temp file path
    console.log(res.tempFilePath)
  },
  fail: err => {
    // handle error
  }
})

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

代码语言：javascript
复制
wx.cloud.deleteFile({
  fileList: ['a7xzcb'],
  success: res => {
    // handle success
    console.log(res.fileList)
  },
  fail: err => {
    // handle error
  },
  complete: res => {
    // ...
  }
})
#接口测试#编程算法#存储#云开发#小程序·云开发