做项目需求要做一个评价上传图片,这里需要做多张图片上传,需要图片一张一张的上传然后在提交数据保存。还有我写这个博客呢也是方便以后项目用到直接搬,后面项目频繁使用会进行封装组件
思路
用递归的方法,在每一张图片上传完API返回图片服务器地址,用push函数添加到新数组,以此类推上传完成保存这个新数组即可
效果图
实现过程
这里的样式、布局和图片显示逻辑我用的是colorUI的表单组件 colorUI github地址:https://github.com/weilanwl/ColorUI
1.页面布局
view
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="padding-xs bg-img" style="background-image:url({{imgList[index]}})" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="icon-close"></text>
</view>
</view>
<view class="padding-xs solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="icon-cameraadd"></text>
</view>
</view>
</view>
2.页面逻辑
页面逻辑参考:https://www.jianshu.com/p/45f8281f45bd 感谢!
如果项目多出使用可以封装成组件方便使用,因为我只有一处使用就不封装了!
const app = getApp();
Page({
data: {
imgList: [],
fileImgList: [],
},
onLoad: function(options) {
},
ChooseImage() {//选择图片
wx.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.data.imgList.length != 0) {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
} else {
this.setData({
imgList: res.tempFilePaths
})
}
}
});
},
ViewImage(e) {//查看图片
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {//删除图片
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
},
Submission(e){
var then = this
var imgList = then.data.imgList
then.uploadimg({
url: app.globalData.appUrl//API接口地址
path: imgList,
});
},
uploadimg: function(data) {
var then = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.showLoading({
title: '上传中...',
mask: true,
})
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'img',
formData: 'null',
success: function(res) {
wx.hideLoading();
success++;
var str = res.data //返回的结果,可能不同项目结果不一样
var pic = JSON.parse(str);
var pic_name = pic.img;
var fileImgList = then.data.fileImgList;
fileImgList.push(pic_name)//上传后返回的图片地址组成新数组 提交数据时提交
},
fail: function(res) {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: function(res) {
i++;
if (i == data.path.length) {
//图片传完,则继续调用函数提交内容和图片地址数组保存
then.uploadForm()
} else { //若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
then.uploadimg(data);
}
},
})
},
})