小程序上传图片

最新推荐文章于 2025-11-26 17:37:12 发布

原创最新推荐文章于 2025-11-26 17:37:12 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在小程序中使用wx.chooseImage接口进行图片选取并上传的流程，帮助开发者实现小程序内的图片上传功能。

小程序上传图片

wx.chooseImage

<button bindtap="upload">上传图片</button>

    //上传图片
    upload(){
      // 选择图片
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          wx.showLoading({
            title: '上传中',
          })
          const filePath = res.tempFilePaths[0]  //324324.png
          // 上传图片
          const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]  //上传路径
          wx.cloud.uploadFile({ //上传图片到云存储
            cloudPath,  //云存储路径
            filePath,   //本地图片路径
            success: res => {
              console.log('[上传文件] 成功：', res)
            },
            fail: e => {
              console.error('[上传文件] 失败：', e)
              wx.showToast({
                icon: 'none',
                title: '上传失败',
              })
            },
            complete: () => {
              wx.hideLoading()
            }
          })
        },
        fail: e => {
          console.error(e)
        }
      })
    }

filePath.match(/\.[^.]+?$/)[0]  这一部分是截取图片  类似这样格式324324.png截取成.png格式
'my-image' + filePath.match(/\.[^.]+?$/)[0]  然后拼接成这样的形式  my-image.png

了解更多点击下方
wx.chooseImage