微信小程序，上传图片与进度条功能实现

一.首先我们实现上传图片功能，当然我们这里只是演示，刷新之后就会消失，实际开发就需要调用接口了

先写wxml页面

请上传图片

js实现
通过微信官方的一个chooseImage方法实现

 data:{
imageList:[],
 }
 uploadImg(){
   wx.chooseImage({
     count:9,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success:((res)=>{
      this.setData({
        imageList:res.tempFilePaths
     })
     })
   })
  },
这种方法是覆盖之前的图片，添加一张新图片，如果我们想在原有的图片后面添加图片怎么做呢？

 this.setData({
 imageList:this.data.imageList.concat(res.tempFilePaths)
     })
我们通过concat连接两个数组，这种方法不会改变原数组

二.我们实现进度条的功能
如果我们想把第一个进度条，点击之后从20变为80，应该怎么做?

点击按钮完成，将图片1的进度条更新为80%

{{item.title}}


点击

js实现

 data:{
 imgs:[
      { id:1,  title:'图片1',percent:20},
      { id: 1, title: '图片2', percent: 30 },
      { id: 1, title: '图片3', percent: 60 },
    ]
 }
 changePercent(){
  this.setData({
  imgs[0].percent:80
 })
 }
 这是一个错误写法，微信小程序不支持

我们可以通过改变imgs这个里面所有的数据来实现

   let dataList = this.data.imgs
   dataList[0].percent = 80
   this.setData({
     imgs:dataList
   })

这样写虽然可以实现，但是太耗费性能了

介绍一种简便的方法

 this.setData({
['imgs[0].percent']:80,
})
完事，就是这么简单
当然这里面也可以也拼接字符串的形式

let num =0
this.setData({
["imgs["+ num +"].title"]:"gogoing"
})
将title改为gogoing