云开发图片批量上传

边学边丢的小学生

已于 2022-04-25 20:47:55 修改

阅读量239

点赞数

于 2022-04-25 17:21:58 首次发布

本文链接：https://blog.csdn.net/ddch1/article/details/124409965

版权

小程序

var urlArr=[];
var fileName=[];
var filePath=[];
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  clickBtn(){
    wx.chooseImage({//选择文件成功后
      success:res=>{
      //临时地址传给数组filePath 
        filePath = res.tempFilePaths
          //遍历获取数据调用cloudFile，上传图片
        filePath.forEach((item,idx)=>{
            //文件名=时间戳+序号
            fileName=Date.now()+"_"+idx;
            this.cloudFile(fileName,item)
          })
      }
    })
  },
  cloudFile(fileName,path){
    wx.showLoading({
      title: '上传中...',
    })
  wx.cloud.uploadFile({
    cloudPath:fileName+".jpg",
    filePath:path,
  }).then(res=>{
    urlArr.push(res.fileID)//将url地址压入urlArr
    //当压入数量与目标数量相等时，执行渲染视图层
    if (filePath.length==urlArr.length) {
        this.setData({//变量值渲染到视图层
        urlArr
    })
    }
    wx.hideLoading()
  })
  },

JS文件

<button type="primary" bindtap="clickBtn">上传文件</button>
<!-- wx.for 在组件上使用wx.for 控制属性绑定一个数组，下标变量名默认为index，数组当前项变量名默认为item -->
<image wx:for="{{urlArr}}"src="{{item}}"></image>

wxml文件