微信小程序-图片上传功能的实现

1.index.wxml

<view class="uploader-text" bindtap="doUpload">
      <text>上传图片</text>
 </view>

2.index.js

Page({
          
   
// 上传图片
  doUpload: function () {
          
   
    // 选择图片
    wx.chooseImage({
          
   
      count: 1,
      sizeType: [compressed],
      sourceType: [album, camera],
      success: function (res) {
          
   
        wx.showLoading({
          
   
          title: 上传中,
        })

        const filePath = res.tempFilePaths[0]
        
        // 上传图片
        const cloudPath = `my-image${
            
     filePath.match(/.[^.]+?$/)[0]}`
        wx.cloud.uploadFile({
          
   
          cloudPath,
          filePath,
          success: res => {
          
   
            console.log([上传文件] 成功:, res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
          
   
              url: ../storageConsole/storageConsole
            })
          },
          fail: e => {
          
   
            console.error([上传文件] 失败:, e)
            wx.showToast({
          
   
              icon: none,
              title: 上传失败,
            })
          },
          complete: () => {
          
   
            wx.hideLoading()
          }
        })
      },
      fail: e => {
          
   
        console.error(e)
      }
    })
  }
})
经验分享 程序员 微信小程序 职场和发展