• 周二. 11 月 12th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

小程序云开发(二)使用云开发接口函数实现云空间文件的上传、下载和删除操作

admin

11 月 28, 2021

 

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
        env: 'luna-7gm1d64198b1c778',
        traceUser: true,
      })
    }

    this.globalData = {}

  }
})
<!--pages/index/index.wxml-->

<view class='box'>
  <view class='title'>文件上传/下载</view>
  <view class="Hcontainer">
    <button type='primary' bindtap="doUpload">上传图片</button>
    <button type='primary' wx:if="{{uploadSuccess}}" bindtap="doDownload">下载图片</button>
  </view>
  <view wx:if="{{uploadSuccess}}" class="list">
    <text class="list-title">上传成功</text>
    <view class="list-item">
      <text>文件 ID:{{fileID}}</text>
    </view>
    <view class="list-item">
      <text>云文件路径:{{cloudPath}}</text>
    </view>
  </view>
  <view wx:if='{{downloadSuccess}}' class="list">
    <text class="list-title">下载成功</text>
    <text class='list-text'>点击缩略图可预览图片</text>
    <view class='image-container'>
      <image src="{{downloadedFilePath}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>
</view>



<button type=’primary’ wx:if=”{{uploadSuccess}}” bindtap=”doDownload”>下载图片</button>条件渲染,显示的条件是uploadSuccess这个变量为true,上传图片成功显示此button组件,绑定的事件是doDownload

<image src=”{{downloadedFilePath}}” mode=”aspectFit” bindtap=”previewImg”></image>image组件,文件源绑定的是downloadedFilePath这个变量,即下载文件的临时路径,绑定的点击事件是previewImg,点击图片的时候调用previewImg函数
/* pages/index/index.wxss */

.Hcontainer {
  margin: 100rpx 0rpx 50rpx;
  padding: 0 50rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.opButton {
  color: white;
  background-color: #0f0;
  border-radius: 10px;
}

.list {
  margin-top: 40rpx;
  width: 100%;
  padding: 0 40rpx;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.list-title {
  margin: 20rpx;
  color: black;
  font-size: 28px;
  font-style: bold;
  display: block;
}

.list-item {
  width: 100%;
  padding: 10rpx;
  font-size: 16px;
  color: #007aff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.list-text {
  color: red;
  font-size: 12px;
  display: block;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container image {
  max-width: 30%;
  max-height: 10vh;
  margin-top: 20rpx;
  border: 1px solid #e0e0e0;
}
// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    fileID: '', // 上传文件的ID
    cloudPath: '', // 上传文件的云端路径
    imagePath: '', // 上传图片的本地临时路径
    downloadedFilePath: '', // 图片下载后的本地临时路径
    uploadSuccess: false, // 文件是否上传成功的标记
    downloadSuccess: false // 文件是否下载成功的标记
  },
  // 图片上传事件函数
  doUpload: function() {
    var that = this;
    const fileID = this.data.fileID;//取到页面变量fileID的值保存到常量fileID
    if (fileID != '') { // 如果之前上传了图片(fileID不为空)则删除之
      wx.cloud.deleteFile({
        fileList: [fileID] // 要删除的文件ID的数组
      })
    }
    // 选择图片
    wx.chooseImage({ // 调用接口选择图片
      count: 1, // 图片数量
      sizeType: ['compressed'], // 尺寸类型
      sourceType: ['album', 'camera'], // 图片来源
      success: function(res) { // 调用成功时的回调函数
        wx.showLoading({ // 显示加载提示框
          title: '上传中',
        })
        const filePath = res.tempFilePaths[0] // 保存上传文件的临时路径
        console.log("filePath:", filePath)
        // 上传图片
        const cloudPath = 'img' + Date.now() + filePath.match(/.[^.]+?$/)[0]
        wx.cloud.uploadFile({ // 调用接口上传文件
          cloudPath, // 文件的云端路径
          filePath, // 文件的本地临时路径
          success: res => { // 调用成功时的回调函数
            console.log('[上传文件] 成功:', res)// 上传成功返回的res变量中就会有文件的id
            that.setData({ // 设置页面绑定数据
              uploadSuccess: true,
              downloadSuccess: false,
              fileID: res.fileID,// 文件的id,保存到本地的页面变量ileID
              cloudPath: cloudPath,
              imagePath: filePath,
              downloadedFilePath: ''
            })
          },
          fail: e => { // 调用失败时的回调函数
            console.error('[上传文件] 失败:', e);
            that.setData({ // 设置页面绑定数据
              uploadSuccess: false,
              fileID: '',
              cloudPath: '',
              imagePath: ''
            })
            wx.showToast({ // 显示消息提示框
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => { // 调用完成时的回调函数
            wx.hideLoading() // 隐藏加载提示框
          }
        })
      },
      fail: e => { // 调用失败时的回调函数
        console.error(e)//选择图片失败,仅做错误记录
      }
    })
  },
  // 图片下载事件函数
  doDownload: function() {
    var that = this;
    wx.showLoading({ // 显示加载提示框
      title: '下载中',
    })
    wx.cloud.downloadFile({ // 调用接口下载文件
      fileID: that.data.fileID, // 云端文件ID,要下载的文件ID,之前上传的时候,上传图片的id,已经保存到了页面变量fileID中,这里赋值给所需的参数
      success: res => { // 调用成功时的回调函数
        console.log("下载文件成功: ", res)// 下载成功返回的res变量中就有下载文件的临时路径
        that.setData({ // 设置页面绑定数据
          downloadSuccess: true,
          downloadedFilePath: res.tempFilePath//把下载文件的临时路径设置给页面变量downloadedFilePath,同时把downloadSuccess设置为true,然后使用setData方法进行页面数据的更新
        })
        wx: wx.showModal({ // 显示模态对话框
          title: '文件下载成功',
          content: '文件路径:' + that.data.downloadedFilePath,
          showCancel: false,
          confirmText: '确定',
          confirmColor: '#0000ff',
        })
      },
      fail: err => { // 调用失败时的回调函数
        that.setData({ // 设置页面绑定数据
          downloadSuccess: false,
          downloadedFilePath: ''
        })
      },
      complete: () => { // 调用完成时的回调函数
        wx.hideLoading() // 隐藏加载提示框
      }
    })
  },
  // 图片预览事件函数
  previewImg: function() {
    wx.previewImage({ // 调用接口预览图片
      current: '', // 当前显示图片的http链接
      urls: [this.data.downloadedFilePath] // 需要预览的图片url的数组,this.data.downloadedFilePath下载的图片文件的临时路径
    })
  }
})
    if (fileID != ”) { // 如果之前上传了图片(fileID不为空)则删除之
      wx.cloud.deleteFile({
        fileList: [fileID] // 要删除的文件ID的数组
      })
    }
如果不是空字符串,就说明之前上传了一次图片,调用deleteFile接口,把文件删除,参数是待删除的文件列表,只有一个文件,就是当前文件的fileID,这样做的目的,避免一次反复的上传文件,造成云端文件太多,如果之前已经上传了一次文件,就先将文件删除,再进行后面的上传
success: function(res) { // 调用成功时的回调函数
        wx.showLoading({ // 显示加载提示框
          title: ‘上传中’,
        })
        const filePath = res.tempFilePaths[0] // 保存上传文件的临时路径
        console.log(“filePath:”, filePath)
        // 上传图片
        const cloudPath = ‘img’ + Date.now() + filePath.match(/.[^.]+?$/)[0]
        wx.cloud.uploadFile({ // 调用接口上传文件
          cloudPath, // 文件的云端路径
          filePath, // 文件的本地临时路径
          success: res => { // 调用成功时的回调函数
            console.log(‘[上传文件] 成功:’, res)
            that.setData({ // 设置页面绑定数据
              uploadSuccess: true,
              downloadSuccess: false,
              fileID: res.fileID,
              cloudPath: cloudPath,
              imagePath: filePath,
              downloadedFilePath: ”
            })
          },
          fail: e => { // 调用失败时的回调函数
            console.error(‘[上传文件] 失败:’, e);
            that.setData({ // 设置页面绑定数据
              uploadSuccess: false,
              fileID: ”,
              cloudPath: ”,
              imagePath: ”
            })
            wx.showToast({ // 显示消息提示框
              icon: ‘none’,
              title: ‘上传失败’,
            })
          },
          complete: () => { // 调用完成时的回调函数
            wx.hideLoading() // 隐藏加载提示框
          }
        })
      },
选择图片成功的话,返回参数res,res中就有选择的图片文件的临时路径,是一个数组,只选择1个,取其中下标值为0的就可以,保存在filePath常量中
之后上传选择的图片,上传之前,先构造一下在云端的文件路径,把文件在云端命名为一个由img三个字母开头+当前时间相关的数字+原来文件的拓展名的新的文件名,因为没有指定路径,所以这个文件在云端就是在根目录下
 

一、小程序云开发的存储功能

  云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过API使用云存储功能。

二、文件上传、下载、删除接口

  1、文件上传接口wx.cloud.uploadFile(Object object) 

    参数object的属性主要包括cloudPath、 filePath以及回调函数。

     cloudPath是文件的云存储路径。

     filePath是要上传的文件资源的路径。

    在回调函数success中,可以获得调用成功时 的返回参数,包括云文件的fileID和HTTP状 态码statusCode。

  2、文件下载接口wx.cloud.downloadFile(Object object)

    参数object的属性主要包括fileID和回调函数。

    fileID是云文件 ID。

    在回调函数success中,可以获得调用成功 时的返回参数 , 包 括 临 时 文 件 路 径 tempFilePath和HTTP状态码statusCode。

  3、文件删除接口wx.cloud.deleteFile(Object object)

    参数object的属性主要包括fileList和回调函数。

    fileList是云文件 ID 字符串数组。

    在回调函数success中,可以获得调用成功 时的返回参数fileList。这是一个删除结果 列表,列表中的每个元素都是一个对象, 对象的属性包括云文件的fileID、状态码 status和错误消息errMsg。

发表回复