版权声明：咔咔 来自https://blog.csdn.net/fangkang7 https://blog.csdn.net/fangkang7/article/details/81943614
在这里先说下我做的案例，顺便大家可以看看
项目样式图
前端代码
//前端代码
<!--团队介绍 -->
<view class="m-team" wx:if="{{tabs[2].selected}}">
<view bindtap="onTapAddMember" class="m-addBtn">
<view>+ 添加成员</view>
</view>
<view class="m-memberItem m-clear" wx:for="{{memberList}}" wx:key="uniqueMember">
<view bindtap="onTapDelMember" class="m-delMemeber" data-memberid="{{item.id}}">
<image src="../../resource/icon-del.png"></image>
</view>
<view catchtap="onTapChangeMemberAvatar" class="m-memberAvatar" data-avatar="{{item.id}}">
<image mode="aspectFill" src="{{item.avatarSrc}}"></image>
</view>
<view class="m-memberInfo" style="width:{{memberInfoWidth}}px">
<input bindinput="onTapInputTeam" data-id="{{item.id}}" data-name="name" placeholder="姓名" type="text" value="{{item.name}}"></input>
<input bindinput="onTapInputTeam" data-id="{{item.id}}" data-name="position" placeholder="公司职位" type="text" value="{{item.position}}"></input>
</view>
<view catchtap="onTapUpMember" class="m-upTeamArrow" data-id="{{item.id}}" wx:if="{{index==0?fale:true}}">
<image src="../../resource/upArrow.png"></image>
</view>
<view catchtap="onTapDownMember" class="m-downTeamArrow" data-id="{{item.id}}" wx:if="{{index==memberList.length-1?fale:true}}">
<image src="../../resource/upArrow.png"></image>
</view>
</view>
在data声明一个参数memberList空数组
data: {
memberList: [],
},
上传图片的方法
//上传图片
// param img 图片；
function fileupload(mdl = '', callback) {
var datas = [];
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var tempFilePaths = res.tempFilePaths;
// wx.showLoading({
// title: '图片上传中..',
// })
wx.uploadFile({
url: 'https://www.weiuid.com/index.php/api/upload/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'mdl': mdl
},
success: function (res) {
wx.hideLoading();
// wx.showToast({
// title: '上传成功',
// });
var data = JSON.parse(res.data);//你大爷的强制返回字符串；强制转json
callback(data.data);
// console.log(callback(data.data))
},
fail: function (res) {
wx.showToast({
title: '图片上传中',
});
}
});
}
});
}
添加图片的代码，为了避免数据库压力过大，将数据存储到缓存里边，这边调用了一个图片上传的方法
// 添加成员
onTapAddMember: function() {
var e = this.data.memberList, a = "new-" + e.length;
wxb.that = this;
wxb.fileupload('', function (data) {
// 判断上传的路径是否为空
if (data.img != '') {
var i = {
id: a,
avatarSrc: data.img_url,
name:'',
position:'',
isCreate: !0,
};
//这里将数据存放到了提前声明的数组里边
e.push(i);
console.log(e)
//将数据存到缓存中
wx.setStorageSync('memberList', e)
//将缓存的数据保存起来，使用缓存来循环，可以加快页面加载速度
wxb.that.setData({
memberList: e
});
} else {
wx.showToast({
title: '上传失败',
})
}
});
},
使用了上边代码之后就可以直接将成员信息循环出来，现在就还存在一个问题就是，如果上传了多个成员信息，姓名和职位怎么一一对应的填写上
添加姓名和职位的方法，姓名和职位都有俩个自定义的属性，使用循环将名字和职位添加进去。
所有的数据都在s里边保存这，所以把最终的数据是s，把s在一次存放到缓存即可
// 添加成员姓名和职位
onTapInputTeam: function(e) {
for (var a = e.currentTarget.dataset.id, t = e.currentTarget.dataset.name, o = e.detail.value, s = this.data.memberList, n = 0; n < s.length; n++) a == s[n].id && (s[n].isUpdate = !0,
"name" == t ? s[n].name = o : "position" == t ? s[n].position = o : console.log("error"));
// 将新添加的数据全部放到缓存里边
wx.setStorageSync('memberList',s);
},
当没有发布就退出之后，再次进来就没有之前编写的东西，所以我们在onload里边获取缓存的数据
这里要着重说一下这里的坑，onload是一进小程序就会直接加载的，所有当你把内存清理之后，就会报出一个错，说在*****不是一个方法。
解决这个问题很是简单，我们俩分析分析原因，我们在一开始就直接获取了memberList这个缓存，但是注意的是这里并获取不到数据，所以会直接把一个未知的变量给赋值到this.data.memberList，所以在点击上传的时候就会出现，push不进去东西，因为只有数组才可以push进去东西。
所以就需要这样的处理一下，做一个判断，判断当从缓存拿不到数据的时候，给这个data里边的数据重新附一个【】空数组的值，在设置值，这样就不会报错了。问题完美解决
var memberLists = wx.getStorageSync('memberList');
if (!memberLists){
memberLists = [];
}
this.setData({
memberList: memberLists
});