小程序-----上传图片
page { background: #f3f3f3; height: 100%; } .tos{ height: 100vh; } .upload { width: 100%; /* height: 320rpx; */ background: rgb(255, 255, 255); margin-bottom: 10rpx; } .flex { display: flex; } .nos{ overflow: hidden; height: 1000rpx; } .up-pic { /* padding:20rpx 24rpx; */ width: 100%; justify-content: center; } /* .ap-box{ float: left; } */ .pic-box { padding-top: 26rpx; flex-flow: wrap; width: 710rpx; margin: 0 auto; display: flex; justify-content: space-between; } .ap-box { position: relative; margin-bottom: 10rpx; } .add-pics { width: 360rpx; height: 190rpx; /* margin-right: 20rpx; */ margin: 0 auto; position: relative; text-align: center; border: 1rpx dashed rgb(153, 153, 153); /* margin-top: 30rpx; margin-bottom: 40rpx; */ } .add-pic { width: 230rpx; height: 180rpx; /* margin-right: 20rpx; */ position: relative; /* margin: 20rpx 30rpx 20rpx 30rpx; */ } .img { width: 44rpx; height: 44rpx; } .imgs { width: 100rpx; height: 83rpx; margin-top: 30rpx; } .p-v { font-size: 28rpx; color: rgb(51, 51, 51); margin-top: 10rpx; /* padding-bottom: 30rpx; */ } /* 删除图片 */ .img-de { width: 45rpx; height: 45rpx; border-radius: 50%; position: absolute; right: 6rpx; top: 6rpx; } .hong-contant .teamwork-btn { width: 360rpx; height: 88rpx; border-radius: 50rpx; color: white; background-color: #14a1fd; margin: 0 auto; margin-top: 80rpx; margin-bottom: 40rpx; }
<view class='upload'> <!-- 选择图片 --> <view class='up-pic'> <view class='flex pic-box'> <block wx:key="imgbox" wx:for="{{images}}"> <view class='ap-box'> <view class='add-pic'> <image class='add-pic' src="{{url+'/'+item}}" mode='aspectFit'></image> <view class='img-de' data-deindex='{{index}}' bindtap='imgDelete1'> <image class='img' src='../../images/delate.png'></image> <!-- //右上角的删除按钮图片 --> </view> </view> </view> </block> </view> <view style='padding-top:40rpx;padding-bottom:40rpx;'> <view class='add-pics' bindtap='addPic1' wx:if="{{imgbox.length<9}}"> <image class='imgs' src='../../images/pictures.png'></image> <view class='p-v'>点击上传照片</view> <!-- //+号图片 --> </view> </view> </view> </view>
// pages/release/release.js
var app = getApp();
var eapi = getApp().url;
var images = []
Page({
/**
* 页面的初始数据
*/
data: {
imgbox: [], //上传图片,
},
// 删除照片 &&
imgDelete1: function(e) {
console.log(1);
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.images;
console.log(index);
// console.log(imgbox);
imgbox.splice(index, 1)
// console.log(imgbox);
images = imgbox;
that.setData({
images: imgbox
});
},
addPic1: function(e) {
if (images.length>=3){
console.log('限制上传3张图片')
return false
}
var imgbox = this.data.imgbox;
console.log(imgbox)
var picid = e.currentTarget.dataset.pic;
console.log(picid)
var that = this;
var n = 3;
if (3 > imgbox.length > 0) {
n = 3 - imgbox.length;
} else if (imgbox.length == 3) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// console.log(res.tempFilePaths)
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图
console.log(res)
for (var i = 0; i < res.tempFilePaths.length; i++) {
console.log(i)
wx.uploadFile({
header: {
'Content-Type': 'application/json'
},
url: "http://192.168.3.182" + '/v1/api/img',
filePath: res.tempFilePaths[i],
name: 'img',
formData: {
'img': res.tempFilePaths[i],
// id: id
},
success: function(res) {
console.log(res)
that.setData({
img: JSON.parse(res.data).data
})
images.push(JSON.parse(res.data).data)
// console.warn('数组图片');
console.log(images)
that.setData({
images: images
})
var data = res.data
that.onLoad()
},
fail: function(rs) {
console.log(res)
}
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})