微信小程序云开发【上传图片入库并渲染】

笔记 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()
    })
  },