微信小程序 纯代码实现 单图片上传栏（含 上传功能和编辑功能）部分代码

具体效果图：

xf_jiancha.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);
}

xf_jiancha.wxml  图片上传核心代码

[code]<!--图片上传-->
<view class='upload_image_view'>
<!-- <view class='title'>上传检查结果图片</view> -->
<block wx:for="{{files}}" wx:key="*this">
<view class='image_view'>
<image src='{{item}}' bindtap="previewImage" id="{{item}}" data-src="{{item}}" mode="aspectFill"></image>
<view class='del_btn' data-index="{{index}}" bindtap='del_img'>
<view class='baicha'></view>
</view>
</view>
</block>
<view class='add_view' wx:if="{{files.length < up_img_length}}" bindtap="chooseImage">
<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_length}}张。(非必填)</view>
</view>
<!--图片上传-->

xf_jiancha.js 核心代码 和 data数据

[code]  data: {
files: [],
fileids: [],
img_arr:[],
up_img_length: 4,//图片上传长度限制,
bind_save:'staging',
bind_submit:'submit'
}

[code]   /**
* 选择照片
*/
chooseImage: function (e) {
var that = this;
var files = this.data.files;
if (that.data.files.length >= that.data.up_img_length) {
wx.showToast({
title: '最多提交' + that.data.up_img_length + '张照片!',
image: '../../style/img/jinggao.png',
duration: 3000
})
} else {
wx.chooseImage({
count: that.data.up_img_length,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
if (res.tempFilePaths.length + files.length > that.data.up_img_length) {
wx.showToast({
title: '最多提交' + that.data.up_img_length + '张照片!',
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({
files: files
});
}
}
})
}
}

[code] /**
* 放大上传照片
*/
previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
});
}

[code]  /**
* 提示信息
*/
bttips: function () {
wx.showToast({
title: '正在提交!',
icon: 'success',
duration: 2000
});
},
/**
* 暂存
*/
staging: function() {
let that = this;
that.commit(3);
},
/**
* 提交
*/
submit: function() {
let that = this;
that.commit(0);
}

[code]/**
*提交函数
*/
commit: function (status) {
var self = this;
//禁用提交按钮
this.setData({
bind_save: 'bttips',
bind_submit: 'bttips'
})
wx.showLoading({
title: '提交中...',
mask: true
})
if (self.data.files.length > 0) {
//上传图片
for (var i = 0; i < self.data.files.length; i++) {
if (self.data.files[i].search("/public/upload/") == -1) {
self.uploadimgs(app.globalData.serverhostname + "/common/upload/img" + app.globalData.params + "&type=eggimg0", self.data.files[i]);
} else {
let img_urls = self.data.files[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({
fileids: self.data.fileids.concat(img_url)
});
}
}
//监听图片是否上传完成
var interval = setInterval(function () {
//判断是否有上传失败的图片
if (self.data.picuploadsucc == false) {
//存在上传失败的照片
//销毁 interval
clearInterval(interval);
//隐藏加载提示框
wx.hideLoading();
//开启提交按钮
self.setData({
bind_save: 'staging',
bind_submit: 'submit'
})
//提示上传失败
wx.showToast({
title: '提交失败!',
image: '../../style/img/jinggao.png',
duration: 3000
});
} else {
//判断图片是否上传完成
if (self.data.files.length == self.data.fileids.length) {
//图片上传完成并且没有报错
//销毁interval
clearInterval(interval);
//保存数据
submissionData(self, status);
}
}
}, 1000);
} else {
submissionData(self, status);
}

}

[code]  /**
*
* 上传单个图片
*/
uploadimgs: function (url, imgfilepath) {
var that = this;
wx.uploadFile({
url: url,
filePath: imgfilepath,
name: 'file',
header: {
'content-type': 'multipart/form-data'
}, // 设置请求的 header
formData: {}, // HTTP 请求中其他额外的 form data
success: function (res) {
var data = JSON.parse(res.data);
if (data.success) {
//图片上传成功
that.setData({
fileids: that.data.fileids.concat(data.file_path)
});
} else {
//图片上传失败
that.setData({
picuploadsucc: false
})
}
},
fail: function (res) {
//服务器连接失败
that.setData({
picuploadsucc: false
})
}
})
}

[code]  /**
* 删除图片
*/
del_img: function (e) {
var index = e.currentTarget.dataset.index;
index = parseInt(index);
var files = this.data.files;
files.splice(index, 1);
this.setData({
files: files
})
}

[code]/**
* 提交数据到服务器
* that ——> this
* sub_status——> 提交数据状态 0：提交   3：暂存
*/
function submissionData(that, sub_status) {

wx.request({
//向服务器 发送 请求 ，提交整改详情
url: app.globalData.serverurl + "/wxxcxCheckCondition/submissionData" + app.globalData.params,
method: "POST",
data: {
jcResult_pics: that.data.fileids,
sub_status: sub_status
},
success: function(data) {
if (data.data.errno == 0) {

wx.showToast({
title: sub_status == 0 ? '提交成功' : '保存成功',
icon: 'success',
duration: 2000
});
// wx.redirectTo({
//   url: '/pages/xf_check_condition_admin/xf_check_condition_admin?shop_id=' + that.data.shop_id
// })
setTimeout(function() {
wx.navigateBack({ //返回
delta: 1
})
}, 2000);
} else {

wx.showToast({
title: sub_status == 0 ? '提交失败' : '保存失败',
icon: 'error',
duration: 2000
});
}

},
fail: function(errmsg) {
console.log('调用服务器接口失败！' + errmsg);
}
})
}

[code]/**
* 从服务器获取数据 显示 在 页面
*/
function getcheckDetail(that, check_id) {
wx.request({
//向服务器 发送 请求 ，获取整改详情
url: app.globalData.serverurl + "/wxxcxCheckCondition/getCheckDetail" + app.globalData.params,
method: "get",
data: {
check_id: check_id
},
success: function(data) {
if (data.data.errno == 0) {

console.log(data.data);
let check = data.data.check
console.log('我是时间：'+check.check_date);
let mydate = (check.check_date).split('.');

let img_urls=[];
if (check.pic != '' && check.pic != null && check.pic != undefined){
img_urls = (check.pic).split(',');
for(var i=0;i<img_urls.length;i++){
img_urls[i] = app.globalData.serverhostname + img_urls[i] + app.globalData.params
}}
that.setData({
files: img_urls
})

if (check.isRectification != 1) {
that.setData({
yes: 'white',
no: 'blue'
})
}

} else {
console.log('从服务器获取用户信息失败！' + data.data.errmsg);
}

},
fail: function(errmsg) {
console.log('调用服务器接口失败！' + errmsg);
}
})
}

服务器 controller （node.js）

[code]/**
* 提交发起检查数据
*/
*submissionData() {
//整改 id
let check_id = this.ctx.request.body.check_id;
console.log('我是需要更新的id_' + check_id);
//企业 id
let shop_id = this.ctx.request.body.shop_id;
//是否需要整改
let zg_status = this.ctx.request.body.zg_status;
//整改 检查人 id
let user_id = this.ctx.request.body.user_id;
//整改 内容
let jcNeirong = this.ctx.request.body.jcNeirong;
//整改 依据
let yiju = this.ctx.request.body.yiju;
//检查 结果
let jcResult = this.ctx.request.body.jcResult;
//整改 要求
let yaoqiu = this.ctx.request.body.yaoqiu;
//sub_status 审核状态
let audit_status = this.ctx.request.body.sub_status;
//sub_status 备注状态
let remark = this.ctx.request.body.beizhu;
//jcResult_pics 检查结果图片
let jcResult_pics = this.ctx.request.body.jcResult_pics;
//日期
let check_date = this.ctx.request.body.check_date;
console.log('我是需要整改日期_' + check_date);
let qiye = yield app.mysql.queryOne(`SELECT * FROM fd_shop where id='${shop_id}'`);
//获得  唯一 id
let id = '';
if (check_id == '') {
id = this.ctx.helper.uuid();
} else {
id = check_id;
console.log('id 数据。。。' + id);
}
console.log(jcResult_pics);
console.log(jcResult_pics.length);
let pic_urls = jcResult_pics.join(",");
let CheckData = {
id: id,
shop_id: shop_id,//企业ID
check_by: user_id,//检查人ID
check_txt: jcNeirong,//内容
isRectification: zg_status,//是否需要
legal_txt: yiju,
check_result_txt: jcResult,
rectification_req_txt: yaoqiu,
street_id: qiye.street_id,
audit_status: audit_status,
remark: remark,
check_date: new Date(check_date),
pic: pic_urls
}

const conn = yield app.mysql.beginTransaction(); // 初始化事务
try {
if (check_id == '') {
console.log('插入数据。。。');
yield conn.insert("fd_security_check", CheckData);
} else {
console.log('更新数据。。。');
yield conn.update("fd_security_check", CheckData);
}
yield conn.commit();
this.ctx.body = { errno: 0, msg: "保存成功" };
} catch (err) {
yield conn.rollback(); // 捕获异常后回滚事务！！
this.ctx.body = { errno: 1, msg: "保存失败" };
throw err;
}
}