위챗 애플릿 클라우드 개발[사진 입고 및 렌더링]

노트 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()
    })
  },