微信小程序多文件或者图片上传
In Heaven 人气:0html
<view class="list1"> <view class="fonts">上传事件相关资料或文件(jpg/pdf/word)<text class="xuan">(选填)</text> </view> <view class="cell"> <view class='jinList' wx:for="{{uploaderList}}" wx:key="index"> <image class="close1" bindtap="close" data-index="{{index}}" src="../../images/close1.png"></image> <image class="jinListImg" wx:if="{{type != 'file'}}" bindtap='showImg' data-index="{{index}}" src='{{item}}'></image> <image class="jinListImg" src="../../images/img.png" wx:if="{{type == 'file'}}" mode="aspectFill"></image> </view> <view class="jia jia1" bindtap="upImg"> <image src="../../images/jia.png" wx:if="{{isHidden}}"></image> </view> </view> </view>
js
data: { isHidden: true,//原始添加 url: [],//上传文件路径 type: '',//上传文件类型 uploaderList: [],//上传文件数组 showModal: false, }, // // 上传图片 upImg() { var that = this wx.chooseMessageFile({ count: 1, type: 'all', success(res) { // tempFilePath可以作为img标签的src属性显示图片 // console.log('vvvvvvvv',res.tempFiles) const tempFilePaths = res.tempFiles[0].path const type = res.tempFiles[0].type wx.uploadFile({ url: app.globalData.urlSrc + '/api/chuan/index', filePath: tempFilePaths, name: 'file', success(res) { const datas = JSON.parse(res.data) console.log('上传文件', datas) var status = datas.status that.data.list if (status == 1) { var upFiles = datas.data if (upFiles != '') { let tempFile = tempFilePaths; let uploaderList = that.data.uploaderList.concat(tempFile);//返回页面的图片数据 that.data.url = that.data.url.concat(upFiles);//传给后台的图片数据 that.setData({ type: type, uploaderList: uploaderList }) } } } }) } }) }, // 删除上传 close(e) { var that = this var nowList = [];//新数据 var uploaderList = that.data.uploaderList;//原数据 for (let i = 0; i < uploaderList.length; i++) { if (i == e.currentTarget.dataset.index) { continue; } else { nowList.push(uploaderList[i]) } } that.setData({ uploaderList: nowList, isHidden: true }) },
css
.list1 { width: 670rpx; margin: 0 auto; } .tops { display: flex; margin-bottom: 22rpx; } .left1 { margin-left: 12rpx; line-height: 44rpx; text-align: left; } .listImg1 { width: 44rpx; height: 44rpx; margin-left: 24rpx; } .textarea1 { width: 670rpx; height: 250rpx; line-height: 40rpx; border-radius: 44rpx; background-color: rgba(255, 255, 255, 1); color: rgba(16, 16, 16, 1); font-size: 14px; text-align: left; border: 1px solid rgba(240, 240, 240, 1); margin:0 auto; padding: 20rpx 40rpx; box-sizing: border-box; margin-bottom: 40rpx; } .jia{ width: 140rpx; height: 140rpx; margin-top: 40rpx; } .jia image{ width: 140rpx; height: 140rpx; } .cell { width: 100%; overflow: hidden; } .jinListImg { width: 140rpx; height: 140rpx; border-radius: 24rpx; } .close1 { width: 40rpx; height: 40rpx; position: absolute; margin-left: 100rpx; } .jia1 { float: left; position: relative; }
示例图
加载全部内容