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

举报
别团等shy哥发育 发表于 2023/01/09 18:42:52 2023/01/09
【摘要】 @toc 1、云存储  我们直到,云开发控制台更多的是对项目中的初始文件的操作管理,例如项目的Logo图片可以通过云开发控制台提起上传到云端。项目在执行的过程中也会涉及文件的操作,例如用户上传图片的操作,这时就需要用到云开发存储API。  小程序云开发提供了一系列存储操作API,有uploadFile()文件上传接口、downloadFile()下载文件接口、deleteFile()删除文件...

@toc

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]。

  示例效果如下:

image-20220323234604322

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

image-20220323234653326

image-20220323234754458

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

image-20220323234904307

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

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 => {
    // ...
  }
})
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。