微信小プログラム画像のアップロードとテンセントの無料5 Gストレージ空間の使用を迅速かつ効率的に実現

本文はどのように微信の小さいプログラムの開発の中でテンセントの公式の提供するクラウドの開発の機能を使って急速にピクチャーのアップロードと記憶を実現することを紹介して、およびクラウドの開発の5 Gの記憶空間の基本的な使用方法を紹介して、これは大いに微信の小さいプログラムの開発の効率を高めます
一般的な画像アップロード機能の開発では、一般的に以下のいくつかの技術点を実現する必要があります.

バックグラウンドサーバの購入;

APIドメイン名の購入と構成;

API機能の開発;

ピクチャ空間の論理処理及び合理的な管理;

配置ピクチャCDNはピクチャロード効率を加速させる.

テンセントが提供するクラウド開発機能を使用する場合、数行のコードだけで微信ウィジェットで完全な画像アップロードロジックを実現することができ、非常に便利で、効率的です.
2.画像アップロードのコード実装
テンセントクラウド開発を用いて画像アップロードを実現する主な業務ロジックは以下の通りである.

は、wx.chooseImageの方法によって、ユーザにデバイス内のピクチャリソースを選択させる.

はwx.cloud.uploadFile方法で画像のアップロードを実現し、テンセントが提供した無料5 G空間にアップロードした.

は、wx.cloud.uploadFileのコールバックイベント処理により、クラウドから返されたピクチャリソースID、リンクなどの関連属性を処理し、後続の処理を行う.

次に、この3つのビジネスロジックのコード部分を直接見てみましょう.

 /*              */
 //     
  doUpload: function () {
    //     
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '   ',
        })

        const filePath = res.tempFilePaths[0]
        
        //     
        //                 ，             my-image
        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)
      }
    })
  },

       ，                 

onLoad: function (options) {

    const {
      fileID,
      cloudPath,
      imagePath,
    } = app.globalData

    this.setData({
      fileID,
      cloudPath,
      imagePath,
    })
  },

後記:クラウド開発マネージャでの画像の管理と表示により、画像が正常にアップロードされたことがわかります.
転載先:https://www.cnblogs.com/ljx20180807/p/9987803.html