1、wxml
<view class='item' >
//显示已存在的图片列表,点击删除删除前一个view
<view wx:for="{{imgList}}">
<view class='imgList'>{{item.pictureurl}}</view>
<button class='bgBtn' data-index="{{index}}" bindtap='hanlderdelBtn'>删除</button>
</view>
</view>
<view class='item'>
<text class='txt'>资料上传</text>
<view class='photoes'>
<view class='uplist' wx:for="{{array}}" wx:for-index="idx" wx:for-item="item">
<view class='fileList'>
<image src="{{item.src}}"></image>
</view>
<button class='bgBtn' data-id='{{idx}}' bindtap='uploadImg'>上传照片</button>
</view>
<view class='addMore' bindtap='addMorePhoto'>添加多张</view>
</view>
</view>
2、wxss
.photoes .uplist{
border: 2px dashed #FFCC99;
background-color: #fff;
margin-bottom: 20rpx;
}
.photoes .uplist .fileList image{
height: 360rpx;
}
.photoes .uplist .fileList image{
display: block;
width: 100%;
}
.photoes .uplist .bgBtn,.photoes .addMore{
background: #ff6600 !important;
color: #fff !important;
font-size: 28rpx;
line-height: 100rpx;
display: block;
text-align: center;
border-radius: 0;
}
.photoes .addMore{
margin-top: 20rpx;
}
3、js
var saveimgurl1 = '';
var delstr1 = [];
Page({
data:{
array: [{
id: 0,
src: ''
}],
saveimgurl: ''
},
/*点击删除事件*/
hanlderdelBtn: function(event) {
console.log(event);
var index = event.currentTarget.dataset.index;
/*删除下标为index的imgList里的图片和删除按钮*/
delstr1 = this.data.imgList.splice(index, 1);
console.log(delstr1);
this.setData({
imgList: this.data.imgList, //删除后的图片列表
delStr: this.data.delStr.concat(delstr1) //已删除的图片列表
});
},
/*上传图片 */
uploadImg: function(event) {
console.log(event);
this.addImg(event.currentTarget.dataset.id);
},
/*点击添加更多图片 */
addMorePhoto: function(event) {
const length = this.data.array.length;
/*增加图片列表*/
this.data.array = this.data.array.concat([{ id: length, src: ''}]);
this.setData({
array: this.data.array
});
console.log(this.data.array);
},
/*点击上传照片 */
addImg: function(id) {
console.log(id);
var that = this;
wx.chooseImage({
count: 1, // 默认9
// sizeType: ['compressed'],
sourceType: ['camera'],
compressed: false,
success: function (res) {
console.log(res)
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
that.data.array[id].src = tempFilePaths[0];
that.setData({
array: that.data.array
})
console.log(that.data.array);
wx.uploadFile({
url: '/upload', //开发者服务器的 url
filePath: res.tempFilePaths[0], // 要上传文件资源的路径 String类型!!!
name: 'file', // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
header: {
'content-type': 'multipart/form-data'
}, // 设置请求的 header
formData: {
}, // HTTP 请求中其他额外的参数
success: function (res) {
console.log(res);
var me = JSON.parse(res.data);
console.log(me);
saveimgurl1 += me[0].fileurl + ',';
console.log(saveimgurl1);
that.setData({
saveimgurl: saveimgurl1
})
},
fail: function (res) {
console.log("图片上传失败" + res);
}
})
}
});
},
/**
* 生命周期函数--监听页面加载,显示已存在的图片列表
*/
onLoad: function (options) {
console.log(options);
var that = this;
wx.request({
url: "Info",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: "POST",
data: {
},
success: function (res) {
console.log(res);
var res = res.data;
that.setData({
imgList: res[0].picList
});
}
});
},
})