多图上传,前提上传的不能用的图片地址单个传给后端后端返回的图片地址可以再浏览器中打开
<view class="wsxder" style="margin: 0 auto; width: 100%; margin-top: 40rpx;">
<view style="position: relative;" wx:for="{{source}}">
<image class="fille" bindtap="upmg" data-ling="{{index}}" src="/image/filled@2x.png"></image>
<image class="imagess" data-id="{{item}}" src='{{item}}' />
</view>
<view wx:if="{{source.length<3}}" class="imagess" style="width: 200rpx; " bindtap="uploadimg">
<image class="tiajial" src="/image/tiajial.png"></image>
</view>
</view>
<!-- <view class="queren" bindtap="confirm">确认提交</view> -->
// pages/upload/upload.js
var app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imtg:[],
source: [],
},
upmg(e) {
var source = this.data.imtg
var rty = e.currentTarget.dataset.ling
source.splice(rty, 1)
this.setData({
source: source
})
console.log(this.data.source); // ******************* 处理好的最终全部图片路径
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
uploadimg: function () {
var that = this;
wx.chooseImage({ //从本地相册选择图片或使用相机拍照
count: 3, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
//前台显示
that.data.source.push(res.tempFilePaths[0])
that.setData({
source: that.data.source
// sourcel:true
})
that.ltttijiao(res.tempFilePaths[0])
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
}
})
},
ltttijiao(rty){
// wx.showToast({
// title: '上传中...',
// icon: 'success',
// duration: 8000
// })
var that=this
var tempFilePaths = rty
wx.uploadFile({
url: "http:/Housek/WorkPhotosList",
filePath: tempFilePaths,
name: 'file',
formData: {
file:tempFilePaths,
},
success:function(res){
var aeer =JSON.parse(res.data)
that.data.imtg.push(aeer.data)
// that.setData({
// imtg:
// })
console.log("最后的", that.data.imtg);
},
fail:function (res) {
wx.showToast({
title: '上传格式错误',
icon: 'success',
duration: 2000
})
}
})
},
})
.imagess{
display: block;
width: 200rpx;
height: 200rpx;
position: relative;
background-color: #f5f5f5;
margin: 20rpx;
}
.tiajial{
position: absolute;
width: 100rpx;
height: 100rpx;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.wsxder{
display: flex;
justify-content: flex-start;align-items: center;
}
.fille{
position: absolute;
right: 0;
top: 0;
width: 50rpx;
height: 50rpx;
z-index: 999;
}
.queren{
position: fixed;
left: 50%;
bottom: 50rpx;
transform: translateX(-50%);
width: 90%;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #FFF;
background: linear-gradient(270deg, #4FBDF1 0%, #2F80ED 100%);
border-radius: 50px;
}