微信小プログラムクラウド開発【画像をアップロードして入庫してレンダリングする】

メモ2020-07-29

画像をアップロード

wxml

<button type="primary" bindtap="clickBtn"> </button>

js

clickBtn(){
    wx.chooseImage({
      success:res=>{
        console.log(res)
       // 
        var filePath=res.tempFilePaths[0]
        this.cloudFile(filePath)
      }
    })
  },
  cloudFile(path){
    wx.cloud.uploadFile({
      // ， 
      cloudPath:Date.now()+".jpg",
      // filepath
      filePath:path
    }).then(res=>{
      console.log(res)
    })
  },

複数の画像をアップロードしてレンダリング

wxml

<!--pages/demo6/demo6.wxml-->
<button type="primary" bindtap="clickBtn"> </button>
<image wx:for="{{urlArr}}" wx:key="index" src="{{item}}"></image>

js

// 
var urlArr=[];
var filePath=[];

//    
clickBtn(){
    wx.chooseImage({
      success:res=>{
        console.log(res)
        filePath=res.tempFilePaths
        filePath.forEach((item,idx)=>{
          var filename=Date.now()+"_"+idx;
          this.cloudFile(filename,item)
        })
      }
    })
  },
  // ， 
  cloudFile(filename,path){
    wx.showLoading({
      title: ' ',
    })
    wx.cloud.uploadFile({
      // ， 
      cloudPath:filename+".jpg",
      // filepath
      filePath:path
    }).then(res=>{
      urlArr.push(res.fileID)
      if(filePath.length==urlArr.length){
        this.setData({
          urlArr
        })
      }
      wx.hideLoading()
    })
  },

画像のプレビューをアップロードして、クリックして入庫を提出します

wxml

<button type="primary" bindtap="clickBtn"> </button>
<image wx:for="{{arr}}" wx:key="index" src="{{item}}"></image>
-------------------------------------------------
<button type="primary" bindtap="subBtn"> </button>

js

// 
var urlArr=[];
var filePath=[];

//   
 clickBtn(){
    wx.chooseImage({
      success:res=>{
        console.log(res.tempFilePaths)
        this.setData({
          arr:res.tempFilePaths
        })
        filePath=res.tempFilePaths
      }
    })
  },
  // 
  subBtn(){
    filePath.forEach((item,idx)=>{
      var filename=Date.now()+"_"+idx;
      this.cloudFile(filename,item)
    })
  },
  //     
  cloudFile(filename,path){
    wx.showLoading({
      title: ' ',
    })
    wx.cloud.uploadFile({
      // ， 
      cloudPath:filename+".jpg",
      // filepath
      filePath:path
    }).then(res=>{
      urlArr.push(res.fileID)
      if(filePath.length==urlArr.length){
        this.setData({
          urlArr
        })
      }
      wx.hideLoading()
    })
  },