一段代码，使用微信云开发上传文件并显示进度

「爱情、让人受尽委屈。」 2023-02-15 10:23 2阅读 0赞

一开始使用微信云开发的时候，CDN流量和存储流量都是每个月固定收费的，所以对于那些访问资源正好比免费的多一点的时候，就比较尴尬。

还好几经更替，微信云的资源可以开通按量付费，用多少交多少的钱，这个时候再用微信云开发提供的存储、CDN等资源就舒服多了。

不论是头像上传，还是音频上传，上传文件对于小程序开发还是比较重要的一个环节。

function uploadFile(filePath, cloudPath) {
        const uploadTask = wx.cloud.uploadFile({
            cloudPath: cloudPath,  //微信云存储的路径，如 upload/mp3/1.mp3
            filePath: filePath, // 文件路径，上传图片后的tempFilePaths中的path
            success: res => {
                // 上传成功后返回的文件id，对于音频来说，版本库2.2.3以后的版本可以直接播放fileID
                let fileID = res.fileID
            },
            fail: err => {
                console.error(err)
            }
        })
        uploadTask.onProgressUpdate((res) => {
            wx.showLoading({
                mask: true,
                title: '' + res.progress,
            })
            console.log('上传进度', res.progress)
            console.log('已经上传的数据长度', res.totalBytesSent)
            console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        })
    
    }

上传成功后返回的是一个云文件ID，也就是上面的fileID，可以使用微信提供的方法，将其转化为真实链接

wx.cloud.getTempFileURL({
      fileList: ['cloud://xxx', 'cloud://yyy'],
      success: res => {
        // 真实的链接
        console.log(res.fileList)
      },
      fail: err => {
        // 处理异常
      }
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200605095452185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70