Hbuilder中微信小程序上传多图的案例分享
【摘要】 1、实现效果图如下：编辑 描叙：最后那个加号+是上传图片的按钮。每张图片右上角有删除按钮。我这里限定每行显示三张图片。2、具体代码如下：页面data()中定义一个待上传图片的数组变量 tempFiles:[],：页面View内容：<view class="car-list"> <view class="car-item" v-for="(item2, index2) in tem...
1、实现效果图如下：
描叙：最后那个加号+是上传图片的按钮。每张图片右上角有删除按钮。
我这里限定每行显示三张图片。
2、具体代码如下：
页面data()中定义一个待上传图片的数组变量 tempFiles:[],：
页面View内容：
<view class="car-list">
<view class="car-item" v-for="(item2, index2) in tempFiles" :key="index2">
<view :style="{'background-image':'url('+item2.tempFilePath+')','background-repeat':'no-repeat','background-size':'98px 98px'}">
<image src="/static/img/c/delete.png" mode="aspectFit" class="deleteImg" @click="deleteCarPhoto(index2)"></image>
</view>
</view>
<view class="car-item">
<view style="background-image:url('/static/img/personal/add.png');background-repeat:no-repeat;background-size:98px 98px;" @tap="selectCarPhoto()">
</view>
</view>
</view>car-list 下最后一个car-item 是我们的上传图片添加按钮。
v-for 循环 tempFiles 图片。
methods z中定义添加图片和删除图片的方法：
//添加图片
selectCarPhoto(){
wx.chooseMedia({
count: 5,
mediaType: ['image'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success: (res) => {
console.log("选择图片成功："+JSON.stringify(res));
if(res.errMsg=="chooseMedia:ok"){
this.tempFiles=this.tempFiles.concat(res.tempFiles);
}else{
uni.showToast({
title: res.errMsg,
icon: "none",
position: 'center',
duration: 3000
});
}
},fail: (res) => {
console.log("选择图片失败："+res.errMsg);
}
})
},
//删除图片
deleteCarPhoto(index){
this.tempFiles.splice(index,1);
},3、页面的CSS样式(此处样式可以根据自己需求进行调整)
<style>
.car-list{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top:10px;
}
.car-item {
flex: 1;
text-align: center;
margin: 0 10px 10px 0;
box-sizing: border-box;
}
.car-item view{
width:100px;
height: 100px;
}
.car-item:nth-child(3n + 3) {
margin-right: 0;
}
.deleteImg {
width: 40rpx !important;
height: 40rpx !important;
margin-left: 70px;
}
</style>
4、微信上传文件的方法
注：wx.uploadFile 方法需要小程序设置，上传文件合法域名才可使用。本地测试时，微信开发者工具可以选择不校验合法域名。
uploadCarPhoto(carId){
//上传
console.log("开始上传图片");
uni.showLoading({
title: '正在上传车辆图片中......'
});
var fileLength=this.tempFiles.length;
//这个参数是我自定义的,为了最后确定是否都上传完毕，因为微信官方文档并没有多图上传功能
var orderNum=0;
for (var i = 1; i <= this.tempFiles.length; i++) {
let tempFilePath = this.tempFiles[i-1].tempFilePath;
wx.uploadFile({
url: Common.PROJECT_URL+'/context/XXX/uploadCarPhoto',
filePath: tempFilePath,
name: 'car_file',
formData: {
param1: carId,
orderNum: i
},
success(res) {
orderNum=orderNum+1;
if(res.statusCode==200){
var ret=JSON.parse(res.data);
if (ret.code == 1) {
if(orderNum==fileLength){
uni.hideLoading();
wx.showToast({
title: '保存成功',
duration: 2000
});
uni.reLaunch({
url:"/pages/index/index"
});
}
}else{
uni.hideLoading();
uni.showToast({
title: ret.message,
icon: "none",
position: 'bottom',
duration: 3000
});
}
}else{
uni.hideLoading();
uni.showToast({
title: res.errMsg,
icon: "none",
position: 'bottom',
duration: 3000
});
}
}
});
}
}关于微信小程序多图上传，各位大佬还有没有更好的方式呢？欢迎评论区留言，我们共同探讨。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）