云音乐小程序管理系统（六）——HPPT API调用云存储下载文件展示轮播图

因为要从云储存调用图片，对轮播图进行设置

所以前期工作要做足，首先在云控制台的云存储中新建一个文件banner来存放图片
新建数据库banner来存放图片信息

获取数据信息，下载文件展示轮播图

在前端中获取显示列表信息的方法，在生命周期函数中响应

在前端请求数据

// 获取轮播图列表信息
export function fetchList() {
     
  // 发送请求
  return request({
     
    url: `${
       baseUrl}/banner/list`,
    method: 'get'
  })
}

后端和之前的方法一样，集成一个云存储的工具类，方便调用。

const getAccessToken = require('./getAccessToken.js')
const rp = require('request-promise')

const cloudStorage = {
     
    async download(ctx,fileList){
     
        const ACCESS_TOKEN = await getAccessToken()
        const options = {
     
            method: 'POST',
            uri: `https://api.weixin.qq.com/tcb/batchdownloadfile?access_token=${
       ACCESS_TOKEN}`,
            body: {
     
                env: ctx.state.env,
                file_list:fileList
            },
            json: true // Automatically stringifies the body to JSON
        }
    
        return await rp(options)
            .then((res) => {
     
                return res
            })
            .catch(function (err) {
     
                console.log(err)
            })
    }
}

module.exports = cloudStorage

调用时，因为云存储与云数据库还有一点点不一样，为了在网页中进行查看，是需要将返回的fileID进行转换为网页可以使用的格式。然后将我们的获取到的需要数据，返回到前端中

router.get('/list',async(ctx,next)=>{
     
    //默认读取10条数据(查询数据库)
    const query=`db.collection('banner').get()`
    const res=await callCloudDB(ctx,'databasequery',query)
    //因为存储的fileID无法在网页中直接调用，所以调用文件下载的链接转化fileID
    let fileList = []
    const data = res.data 
    for(let i=0,len=data.length; i<len; i++){
     
        fileList.push({
     
            fileid: JSON.parse(data[i]).fileid,
            max_age: 7200
        })
    }
   const downres = await cloudStorage.download(ctx,fileList) //循环遍历输出下载链接内容
   //返回前端所有要使用的值
   let returnData = [] 
   for(let i=0,len=downres.file_list.length;i<len;i++){
     
    returnData.push({
     
        download_url:downres.file_list[i].download_url,
        fileid:downres.file_list[i].fileid,
        _id: JSON.parse(data[i])._id
    })
   }
   ctx.body = {
     
       code:20000,
       data:returnData
   }
})