微信小程序实现多文件或者图片上传
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序实现多文件或者图片上传的具体代码，供大家参考，具体内容如下
html
<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}}" class="lazy" data-src="../../images/close1.png"></image>
<image class="jinListImg" wx:if="{{type != 'file'}}" bindtap='showImg' data-index="{{index}}" class="lazy" data-src='{{item}}'></image>
<image class="jinListImg" class="lazy" data-src="../../images/img.png" wx:if="{{type == 'file'}}" mode="aspectFill"></image>
</view>
<view class="jia jia1" bindtap="upImg">
<image class="lazy" data-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标签的class="lazy" data-src属性显示图片
// console.log('vvvvvvvv',res.tempFiles)
const tempFilePaths = res.tempFiles[0].path
const type = res.tempFiles[0].type
wx.uploadFile({
url: app.globalData.urlclass="lazy" data-src + '/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;
}示例图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
