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

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

• ​​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对象可监听上传事件。

config 对象定义

success 返回参数

fail 返回参数

返回值

  如果请求参数中带有 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: ''
  },

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