微信小程序之Array操作、图片上传

一、Array操作

1，渲染

Array 对象数组多用于列表渲染，对于列表中的数据，能够进行十分便捷有效的存储。

.wxml

<view class='clazz-item' bindtap='showCode'  wx:for="{{array}}"  wx:key='' data-i='{{index}}'>    
     <image src='http://zm.lzfnb.top/cheshi/{{item.classimage}}' 
class='clazz-image'></image>   
     <text class='clazz-name'>{{item.className}}</text>   
     <text class='teacher-name'>{{item.teacher}}</text>   
     <text class='clazz-number'>{{item.number}}</text>  
     <view class='clazz-line' id='{{item.randCode}}'>
     </view> 
 </view>

.js

 data: {  
      array: []
 },

Array 数组的渲染使用十分简单，看代码就能看懂。

然而在与后台交互时，后台返回的数据总是无法成功添加到 array 数组中，也不能渲染到页面。

以下则是解决方法

2，增加

page.data 中的 array 数组是无法通过内部赋值来改变的，在函数中只能对 array 数组进行引用更改操作。

这时就需要借助 “中间商” 数组来对 page.data 中的数组 array 进行更改。

注意：如果需要渲染到视图，则必须使用 this.setData() 方法

  .js

  success: function(res) {   
       console.log(res.data)  
       var array1 = that.data.array;    
       var i = 0;  
       for (i = 0; i < res.data.length; i++) {  
             var a = res.data[i];  
             array1.push(a);     //重点 push 在数组尾添加一行数据
             that.setData({     
                  array: array1         
             });  
       }

这里从后台接收到 data 数组数据，array1 为 “中间商” 数组。

微信小程序中数组只能整组传递， 添加 a 数据后，通过 setData 函数重新传递给 array 。

3，删除

 .js

 array1.splice(id,i)

这条语句就可以从 index 为 id 的位置开始，删除 i 个元素。

4，修改

.js
   
   var array1 = that.data.array;
   var id = that.data.id;
   array1[id] = obj;

修改也很简单，直接对 “中间商” 数组的指定值赋值修改 ， 然后传递给 array 即可。

二，图片获取与上传

从本地相册中获取图片需使用 wx.chooseImage（）方法，可以选择获取的方式。

上传图片需要用 wx.uploadFile（）方法，通过传递 filepath 来上传图片。

.js

chooseimg(event) {    
       this.createCode()    
       var that = this 
       wx.chooseImage({   
              count: 1,  
              sizeType: ['original', 'compressed'], //可选择原图或压缩后的图
              sourceType: ['album', 'camera'], //可选择性开放访问相册、相机    
              success: res => {     
                     that.src = res.tempFilePaths[0];      
                     that.setData({    
                     logoin: res.tempFilePaths[0]   
                     })
                     wx.uploadFile({      
                         url: app.globalData.begin+'upload/picture.action',
                         filePath: that.data.logoin,
                         name: 'file',          
                         formData: {      
                            "during": this.data.during,       
                            "start": this.data.start,          
                            "date": this.data.date          },  
                         success(res) {     
                             console.log(res.data)         
                             that.setData({            
                                   data: res.data        
                             })            
                         },     
                         fail(res){        
                              console.log("失败")   
                         }    
                    })   
             } 
      }) 
 },  

chooseImage（）方法中，count 表示为上传的图片的数量。

sizeType 为选择的本地图片的大小，可以选择原图大小或压缩后大小。
sourceType 为获取图片的方式，可以是从相册中获取，也可以是拍照获取，也可以两者都使用。

uploadFile() 方法一般是在 chooseImage（）方法的成功函数中使用，将图片上传到后台。
filepath 为目标图片，name 为该图片名，注意该图片名应与后台接收时的命名一致。
fromdata 为其他需传递到后台的数据。