uniapp云开发uniCloud.uploadFile上传图片文件后缀名丢失

左手的ㄟ右手 2024-04-03 08:16 13阅读 0赞

### 原因简述：cloudPath属性写的不对 ###

基于uniCloud云开发，实现上传图片功能，发现能正常上传，但是上传的图片会是这种格式，没有后缀名：`https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/72ee0c27-1bbd-4d5e-8512-4e8f055e95cf.`  
经过研究发现，`uniCloud.uploadFile`这个api会截取`cloudPath`属性的`.`后面的值作为上传文件的后缀名  
重点看下方代码处`cloudPath`的注释即可

/** 上传图片 */
        uploadImg() {
        
          // 选择图片，默认不设置count属性的话最多9张
          uni.chooseImage({
        
            success: res => {
        
              // 通过遍历调用uniCloud.uploadFile来批量上传
              for (let i = 0; i < res.tempFilePaths.length; i++) {
        
                uni.showLoading({
        
                  title: "上传中..."
                })
                const filePath = res.tempFilePaths[i] // 选择图片的临时路径
                const name = res.tempFiles[i].name // 选择图片的名称.后缀名
                uniCloud.uploadFile({
        
                  filePath, // 必传，要上传图片的临时路径
                  // cloudPath: Date.now() + "", // 我最开始这样写的，这样写就会导致没有后缀名
                  // cloudPath: Date.now() + ".png", // 这样写所有上传的图片后缀名都会变成png
                  cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
                  success: res => {
        
                    console.log(res)
                    this.addImage(res)
                  },
                  fail(err) {
        
                    console.log(err)
                  },
                  complete() {
        
                    uni.hideLoading()
                  }
                })
              }
            }
          })
        },