微信小程序多图片上传框，含编辑功能，只包含部分核心代码

wxml 文件（核心代码）

[code]<!--图片上传-->
<view class='upload_image_view' wx:if="{{img_arr1.length <= 0}}">
<!-- <view class='title'>招店牌实景效果图</view> -->
<block wx:for="{{files1}}" wx:key="*this">
<view class='image_view'>
<image src='{{item}}' bindtap="previewImage1" id="{{item}}" data-src="{{item}}" mode="aspectFill"></image>
<view class='del_btn' data-index="{{index}}" bindtap='del_img1'>
<view class='baicha'></view>
</view>
</view>
</block>
<view class='add_view' wx:if="{{files1.length < up_img_length1}}" bindtap="chooseImage1">
<view class="xiangji">
<view class="tixing"></view>
<view class='changfx'>
<view class='yuan1'>
<view class='yuan2'></view>
</view>
</view>
</view>
</view>
<view class='info'>上传招店牌实景效果图，最多{{up_img_length1}}张。(非必填)</view>
</view>

<!--图片上传-->
<!--图片上传-->
<view class='upload_image_view' wx:if="{{img_arr2.length <= 0}}">
<!-- <view class='title'>招店牌机构设计图</view> -->
<block wx:for="{{files2}}" wx:key="*this">
<view class='image_view'>
<image src='{{item}}' bindtap="previewImage2" id="{{item}}" data-src="{{item}}" mode="aspectFill"></image>
<view class='del_btn' data-index="{{index}}" bindtap='del_img2'>
<view class='baicha'></view>
</view>
</view>
</block>
<view class='add_view' wx:if="{{files2.length < up_img_length2}}" bindtap="chooseImage2">
<view class="xiangji">
<view class="tixing"></view>
<view class='changfx'>
<view class='yuan1'>
<view class='yuan2'></view>
</view>
</view>
</view>
</view>
<view class='info'>上传招店牌机构设计图，最多{{up_img_length2}}张。(非必填)</view>
</view>

<!--图片上传-->

</view>

wxss 文件 （核心样式）

[code].upload_image_view {
width: 90%;
margin: 20rpx 0 20rpx 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.upload_image_view .title {
width: 100%;
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #4a4a4a;
margin-bottom: 15rpx;
line-height: 100%;
}

.upload_image_view .info {
width: 100%;
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #ff4259;
height: 24rpx;
margin-top: 15rpx;
line-height: 24rpx;
}

.upload_image_view .image_view {
height: 130rpx;
width: 130rpx;
position: relative;
margin: 15rpx 15rpx 15rpx 0rpx;
border-radius: 8rpx;
}

.upload_image_view .image_view image {
height: 100%;
width: 100%;
border-radius: 8rpx;
}

.upload_image_view .image_view .del_btn {
background-color: #f67371;
border-radius: 50%;
width: 25rpx;
height: 25rpx;
position: absolute;
top: -12rpx;
right: -12rpx;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

.upload_image_view .image_view .del_btn .baicha {
display: inline-block;
width: 20rpx;
height: 5rpx;
background: #fff;
line-height: 0;
font-size: 0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}

.upload_image_view .image_view .del_btn .baicha:after {
content: '/';
display: block;
width: 20rpx;
height: 5rpx;
background: #fff;
-webkit-transform: rotate(-90deg);
}

.upload_image_view .add_view {
height: 115rpx;
width: 115rpx;
margin: 15rpx 15rpx 15rpx 0rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.00);
border: 4rpx dashed #979797;
border-radius: 8rpx;
}

/* 相机 */

.upload_image_view .add_view .xiangji {
height: 40rpx;
width: 48rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.upload_image_view .add_view .xiangji .tixing {
width: 10rpx;
height: 7rpx;
background-color: #fff;
border-right: 10rpx solid #fff;
border-bottom: 7rpx solid #b2b2b2;
border-left: 10rpx solid #fff;
}

.upload_image_view .add_view .xiangji .changfx {
height: 32rpx;
width: 48rpx;
border-radius: 5%;
background-color: #b2b2b2;
display: flex;
align-items: center;
justify-content: center;
}

.upload_image_view .add_view .xiangji .changfx .yuan1 {
height: 20rpx;
width: 20rpx;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}

.upload_image_view .add_view .xiangji .changfx .yuan2 {
height: 10rpx;
width: 10rpx;
border-radius: 50%;
background-color: #b2b2b2;
}

js 文件 （核心代码）

[code]  /**
* 页面的初始数据
*/
data: {
files1: [],
fileids1: [],
img_arr1: [],
up_img_length1: 4, //图片上传长度限制,
upload_imgs1: [],
files2: [],
fileids2: [],
img_arr2: [],
up_img_length2: 4, //图片上传长度限制,
upload_imgs2: [],
submit_info: '保存',
bindfunc: 'savecase',
server: app.globalData.serverhostname,
params: app.globalData.params
}

[code] // 图片上传 开始
/**
* 选择照片
*/
chooseImage1: function(e) {
var that = this;
var files = this.data.files1;
if (that.data.files1.length >= that.data.up_img_length1) {
wx.showToast({
title: '最多提交' + that.data.up_img_length1 + '张照片!',
image: '../../../style/img/jinggao.png',
duration: 3000
})
} else {
wx.chooseImage({
count: that.data.up_img_length1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
if (res.tempFilePaths.length + files.length > that.data.up_img_length1) {
wx.showToast({
title: '最多提交' + that.data.up_img_length1 + '张照片!',
image: '../../../style/img/jinggao.png',
duration: 3000
})
} else {
for (var i = 0; i < res.tempFilePaths.length; i++) {
var index = 0;
for (var j = 0; j < files.length; j++) {
if (files[j] == res.tempFilePaths[i]) {
index = 1;
}
}
if (index != 1) {
files.push(res.tempFilePaths[i]);
} else {
wx.showToast({
title: '图片已存在！',
image: '../../../style/img/jinggao.png',
duration: 1000
})
}
}
that.setData({
files1: files
});
}
}
})
}
},
/**
* 选择照片
*/
chooseImage2: function(e) {
var that = this;
var files = this.data.files2;
if (that.data.files2.length >= that.data.up_img_length2) {
wx.showToast({
title: '最多提交' + that.data.up_img_length2 + '张照片!',
image: '../../../style/img/jinggao.png',
duration: 3000
})
} else {
wx.chooseImage({
count: that.data.up_img_length2,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
if (res.tempFilePaths.length + files.length > that.data.up_img_length2) {
wx.showToast({
title: '最多提交' + that.data.up_img_length2 + '张照片!',
image: '../../../style/img/jinggao.png',
duration: 3000
})
} else {
for (var i = 0; i < res.tempFilePaths.length; i++) {
var index = 0;
for (var j = 0; j < files.length; j++) {
if (files[j] == res.tempFilePaths[i]) {
index = 1;
}
}
if (index != 1) {
files.push(res.tempFilePaths[i]);
} else {
wx.showToast({
title: '图片已存在！',
image: '../../../style/img/jinggao.png',
duration: 1000
})
}
}
that.setData({
files2: files
});
}
}
})
}
},
/**
* 放大上传照片
*/
previewImage1: function(e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files1 // 需要预览的图片http链接列表
});
},
/**
* 放大上传照片
*/
previewImage2: function(e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files2 // 需要预览的图片http链接列表
});
},
/**
* 提示信息
*/
bttips: function() {
wx.showToast({
title: '正在提交!',
icon: 'success',
duration: 2000
});
},
/**
* 点击案件提交按钮
*/
savecase: function() {
var self = this;
self.commit();
},

commit: function() {
var self = this;
//禁用提交按钮
this.setData({
bind_submit: 'bttips'
})
wx.showLoading({
title: self.data.submit_info + '中',
mask: true
})
if (self.data.files1.length > 0 || self.data.files2.length) {
//上传图片
for (var i = 0; i < self.data.files1.length; i++) {
if (IsInArray(self.data.upload_imgs1, self.data.files1[i]) == false) {

self.uploadimgs(app.globalData.serverhostname + "/common/upload/img" + app.globalData.params + "&type=eggimg0", self.data.files1[i], 'xg');
} else {
let img_urls = self.data.files1[i].split('//');
img_urls = img_urls[1].split('/');
let img_name = img_urls[5].split('?');
let img_url = '/' + img_urls[1] + '/' + img_urls[2] + '/' + img_urls[3] + '/' + img_urls[4] + '/' + img_name[0];
self.setData({
fileids1: self.data.fileids1.concat(img_url)
});
}
} //上传图片
for (var i = 0; i < self.data.files2.length; i++) {
if (IsInArray(self.data.upload_imgs2, self.data.files2[i]) == false) {

self.uploadimgs(app.globalData.serverhostname + "/common/upload/img" + app.globalData.params + "&type=eggimg0", self.data.files2[i], 'jg');
} else {
let img_urls = self.data.files2[i].split('//');
img_urls = img_urls[1].split('/');
let img_name = img_urls[5].split('?');
let img_url = '/' + img_urls[1] + '/' + img_urls[2] + '/' + img_urls[3] + '/' + img_urls[4] + '/' + img_name[0];
self.setData({
fileids2: self.data.fileids2.concat(img_url)
});
}
}
//监听图片是否上传完成
var interval = setInterval(function() {
//判断是否有上传失败的图片
if (self.data.picuploadsucc == false) {
//存在上传失败的照片
//销毁 interval
clearInterval(interval);
//隐藏加载提示框
wx.hideLoading();
//开启提交按钮
self.setData({
bind_submit: 'submit'
})
//提示上传失败
wx.showToast({
title: '上传失败!',
image: '../../../style/img/jinggao.png',
duration: 3000
});
} else {
//判断图片是否上传完成
console.log(self.data.files1.length + '||' + self.data.fileids1.length + '||' + self.data.files2.length + '||' + self.data.fileids2.length);

if ((self.data.files1.length == self.data.fileids1.length) && (self.data.files2.length == self.data.fileids2.length)) {
//图片上传完成并且没有报错
//销毁interval
clearInterval(interval);
//保存数据
submit_dianzhaodp_info(self);
}
}
}, 1000);
} else {
submit_dianzhaodp_info(self);
}

},

/**
*
* 上传单个图片
*/
uploadimgs: function(url, imgfilepath, type_img) {
var that = this;
wx.uploadFile({
url: url,
filePath: imgfilepath,
name: type_img == 'xg' ? 'flie1' : 'file2',
header: {
'content-type': 'multipart/form-data'
}, // 设置请求的 header
formData: {}, // HTTP 请求中其他额外的 form data
success: function(res) {
var data = JSON.parse(res.data);
if (data.success) {
//图片上传成功
if (type_img == 'xg') {
console.log('xg');
that.setData({
fileids1: that.data.fileids1.concat(data.file_path)
});
} else if (type_img == 'jg') {
console.log('jg');
that.setData({
fileids2: that.data.fileids2.concat(data.file_path)
});
}
} else {
//图片上传失败
that.setData({
picuploadsucc: false
})
}
},
fail: function(res) {
//服务器连接失败
that.setData({
picuploadsucc: false
})
}
})
},
/**
* 删除图片
*/
del_img1: function(e) {
var index = e.currentTarget.dataset.index;
index = parseInt(index);
var files = this.data.files1;
files.splice(index, 1);
this.setData({
files1: files
})
},
/**
* 删除图片
*/
del_img2: function(e) {
var index = e.currentTarget.dataset.index;
index = parseInt(index);
var files = this.data.files2;
files.splice(index, 1);
this.setData({
files2: files
})
},
// 图片上传 结束

[code]/**
* 验证某个字符串是否存在于某个集合中
*/
function IsInArray(arr, val) {
var testStr = ',' + arr.join(",") + ",";
return testStr.indexOf("," + val + ",") != -1;
}

[code]/**
* 提交店招牌信息
*/
function submit_dianzhaodp_info(obj) {
let that = obj;
let name = that.data.name;
if (name == '' || name == undefined || name == null || name == NaN) {
wx.hideLoading()
wx.showModal({
title: '警告',
content: '招店牌名称不能为空，请填写！',
success: function(res) {
if (res.confirm) {
return false
} else if (res.cancel) {
return false
}
}
})
return false
}
wx.request({
url: app.globalData.serverurl + "/wxxcxshopbanner/add_diandianzp_info" + app.globalData.params, //数据请求接口地址
method: 'GET',
data: {
//省略 n 行数据
xg_pic: that.data.fileids1.length == 0 ? '' : that.data.fileids1.join(","),
jg_pic: that.data.fileids2.length == 0 ? '' : that.data.fileids2.join(",")
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
if (res.data.errno == 0) {
wx.hideLoading()
wx.showToast({
title: that.data.submit_info + '成功',
icon: 'success',
duration: 2000
});
setTimeout(function() {}, 2000)
//页面将进行重定向
wx.redirectTo({
url: '/packageA/pages/dzjc_detail/dzjc_detail?shop_id=' + that.data.shop_id //页面路径
})
} else {
wx.hideLoading()
wx.showModal({
title: '提示',
content: res.data.msg,
success: function(res) {
if (res.confirm) {
that.commit();
} else if (res.cancel) {

}
}
})
}
},
fail: function(res) {
console.log(res.data)
wx.hideLoading()
wx.showToast({
title: that.data.submit_info + '失败',
image: '../../../style/img/jinggao.png',
duration: 2000
})
}
})
}

[code]/**
* 获取店招店牌信息
*/
function get_dianzhaodp_info(obj) {
let that = obj;
wx.request({
url: app.globalData.serverurl + "/wxxcxshopbanner/get_diandianzp_info" + app.globalData.params, //仅为示例，并非真实的接口地址
data: {
fd_shopcard_id: that.data.fd_shopcard_id
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data);
if (res.data.errno == 0) {
let fd_shopcard = res.data.fd_shopcard;
let size = (fd_shopcard.size).split('*');
let server = that.data.server;
let params = that.data.params;
that.setData({
//省略 n 行数据
files1: to_img_list(fd_shopcard.xg_pic, server, params),
upload_imgs1: to_img_list(fd_shopcard.xg_pic, server, params),
files2: to_img_list(fd_shopcard.jg_pic, server, params),
upload_imgs2: to_img_list(fd_shopcard.jg_pic, server, params),
})
}
},
fail: function(res) {
console.log(res.data)
}
})
}

[code]/**
* 将图片路径转换成服务器 路径
*/
function to_img_list(value, server, params) {
if (value != '' && value != null && value != undefined && value != NaN) {
var pics = value.split(',');
for (var i = 0; i < pics.length; i++) {
pics[i] = server + pics[i] + params
}
return pics;
}
return [];
}

服务器 controller (node.js) ——>本人比较懒,未省略其他 杂乱数据

[code]        /**
* 提交 商户 店招店牌 信息
*/
*add_diandianzp_info() {
let shop_id = this.ctx.query.shop_id;
let user_id = this.ctx.query.user_id;
console.log('shop_id==' + shop_id + '||' + 'user_id==' + user_id);
let fd_shopcard_id = this.ctx.query.fd_shopcard_id;
let fd_shopcard = {};
if (shop_id != '' && shop_id != undefined && shop_id != null && user_id != '' && user_id != undefined && user_id != null) {
let id = fd_shopcard_id == '' ? this.ctx.helper.uuid() : fd_shopcard_id
fd_shopcard = {
id: id,
name: this.ctx.query.name,
size: this.ctx.query.size,
zm_type: this.ctx.query.zm_type,
material: this.ctx.query.material,
create_by: this.ctx.query.user_id,
comment: this.ctx.query.comment,
shop_id: this.ctx.query.shop_id,
create_date: new Date(),
xg_pic: this.ctx.query.xg_pic,
jg_pic: this.ctx.query.jg_pic,
}
const conn = yield app.mysql.beginTransaction(); // 初始化事务
let element = yield app.mysql.queryOne(`SELECT id FROM fd_element WHERE NAME LIKE '%店招店牌%'`);
let element_icon = yield app.mysql.queryOne(`SELECT * FROM fd_shop_element WHERE shop_id='${shop_id}' AND element_id='${element.id}'`);
if (element_icon != null && element_icon != undefined && element_icon != '') {
} else {
if (element != null && element != undefined && element != '') {
let shop_element = {
id: this.ctx.helper.uuid(),
shop_id: shop_id,
element_id: element.id,
create_by: this.ctx.query.user_id,
create_date: new Date(),
update_by: this.ctx.query.user_id,
update_date: new Date(),
deleted: '0'
}
yield app.mysql.insert("fd_shop_element", shop_element);
}
}
try {
if (fd_shopcard_id == '') {
yield app.mysql.insert("fd_shopcard", fd_shopcard);
} else {
yield app.mysql.update("fd_shopcard", fd_shopcard);
}
yield conn.commit();
this.ctx.body = { errno: 0, msg: "提交成功！" };
} catch (err) {
yield conn.rollback(); // 捕获异常后回滚事务！！
this.ctx.body = { errno: 1, msg: "提交失败，是否重新提？" };
throw err;
}
} else {
this.ctx.body = {
errno: 1,
msg: '提交失败,请重试'
}
}
}

[code]       /**
* 获取 商户 店招店牌 详情
*/
*get_diandianzp_info() {

let fd_shopcard_id = this.ctx.query.fd_shopcard_id;
if (fd_shopcard_id != '' && fd_shopcard_id != undefined && fd_shopcard_id != null) {
let fd_shopcard = yield app.mysql.queryOne(`select * from fd_shopcard where id = '${fd_shopcard_id}'`);
if (fd_shopcard != '' && fd_shopcard != undefined && fd_shopcard != null) {
this.ctx.body = {
fd_shopcard: fd_shopcard,
errno: 0,
msg: '初始化成功！'
}
} else {
this.ctx.body = {
errno: 1,
msg: '店招牌不存在!'
}
}
} else {
this.ctx.body = {
errno: 1,
msg: '初始化失败,请重试!'
}
}
}