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

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 => {
    // ...
  }
})