微信小程序云开发图片上传至云存储，提交到云数据库时的出现的3种文件路径问题

2301_80482040

于 2024-09-13 21:55:58 发布

阅读量1k

点赞数 16

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_80482040/article/details/142131878

版权

做本小程序的开发时，考虑到各种因素限制，后台没有自设服务器配置域名，而是使用易上手的原生微信云开发，与之配套的则是云存储、云数据库以及云函数。目前函数处理依旧是在每一个页面的.js文件中，暂未分离迁移至云函数库中。

在开发本微信小程序时，有一部分功能是对用户上传的照片进行暂时的云存储，之后再和其他数据一起提交云数据库中，这时候就需要拿到一个有效的图片存储地址，作为在数据库中的一个存储项。而在实际开发中，我遇到了3种路径，分别是临时路径http://tmp/开头、永久路径https开头以及提交到云存储时获得的fileID，以cloud://开头（代表图片在其中的具体位置）。经过不断地控制台打印输出调试，终于可以区分这3种路径，以及各自的获取方式。

1.wx.chooseMedia()函数

微信小程序开发者文档位置

其功能是拍摄或从手机相册中选择图片或视频

编程序时的代码，chooseImage_next函数实现将用户上传的图片放到云存储中，里面调用wx.chooseMedia函数，其中的cloudFile_next是自定义的处理函数，源码参见下方。

    chooseImage_next() {
        wx.chooseMedia({
          count: 1,
          sizeType:['original','compressed'],
          sourcetype:['album','camera'],
          success: res=> {
            console.log(res)
            var filePath=res.tempFiles[0].tempFilePath
            this.cloudFile_next(filePath)
            console.log(filePath)
            wx.setStorageSync('pic22', filePath)

          },
        });
        
      },

wx.chooseMedia()调用成功后返回的res为

通过对res对象分析，不难看出可以通过res.tempFiles[0].tempFilePath获取到的filePath是以tmp开头的临时链接，客户端可以访问到，但会有时间的限制。

2.wx.cloud.uploadFile()函数

微信小程序开发者文档位置

其功能是将本地资源上传至云存储空间

cloudPath是上传到云存储中的图片在云存储中的具体位置（云存储路径），常用事件戳+".jpg"形式来作为名字

filePath就是上述chooseMedia函数中获取到的res中的filePath，是tmp开头的临时路径

cloudFile_next(path){
        wx.cloud.uploadFile({
            cloudPath:Date.now()+".jpg",  //cloudPath是在云存储中的位置
            filePath:path,
            name: 'file',
            }).then(res=>{
                this.setData({
                    image_next:res.fileID
                })

                wx.setStorageSync('pic22Demo',res)
                
            // 将 局限性较大的临时链接tep开头，几分钟有效 或者 只有客户端能拿到的fileID转化为http开头全网访问的链接
        wx.cloud.getTempFileURL({
            fileList:[res.fileID],
            success(res){
                console.log(fileList)
              console.log('demo picture url',res);
              console.log(res.fileList[0])
              console.log(res.fileList[0].tempFileURL)
            },
           
          })
        })
    },

本函数成功后的res输出为