上传组件uploadImg文件夹(有uploadImg.wxml、uploadImg.wxss、uploadImg.js、uploadImg.json)
uploadImg.wxml:
<view class="uploadImg-wrap">
<view class="imgList-wrap">
<view class="upload-list-item" wx:for="{{imgList}}" wx:key="index" wx:for-index="index" wx:for-item="item" bindtap="viewImage" data-url="{{item}}">
<image class="card-img" src="{{item}}"></image>
<view class="icon-delete" catchtap="delImg" data-index="{{index}}">
<image class="icon-delete" mode="widthFix" src="../../static/common/icon-delete.png"></image>
</view>
</view>
<view class="add-wrap" bindtap="chooseImg" wx:if="{{imgList.length<maxCount}}">
<image class="icon-camera" mode="widthFix" src="../../static/common/icon-camera.png"></image>
<view class="add-title">{{title}}</view>
</view>
</view>
</view>
uploadImg.wxss:
.uploadImg-wrap {
width: 100%;
padding: 0 10rpx;
box-sizing: border-box;
}
.uploadImg-wrap .imgList-wrap {
overflow: hidden;
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-items: center;
}
.uploadImg-wrap .imgList-wrap .upload-list-item {
position: relative;
width: 200rpx;
height: 200rpx;
margin-top: 30rpx;
}
.uploadImg-wrap .imgList-wrap .upload-list-item .card-img {
width: 100%;
height: 100%;
vertical-align: middle;
pointer-events: auto;
border-radius: 8rpx;
border: 1px dashed #979797;
}
.uploadImg-wrap .imgList-wrap .upload-list-item .icon-delete {
width: 40rpx;
position: absolute;
right: -10rpx;
top: -10rpx;
}
.uploadImg-wrap .add-wrap {
width: 200rpx;
height: 200rpx;
border: 1px dashed #979797;
border-radius: 8rpx;
background: #f9fafb;
text-align: center;
margin-top: 30rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.uploadImg-wrap .add-wrap .icon-camera {
width: 80rpx;
height: 80rpx;
pointer-events: none;
}
.uploadImg-wrap .add-wrap .add-title {
color: #333333;
}
uploadImg.js:
import { API_URL } from "../../common/request.js"
Component({
lifetimes: {
created: function () { },
attached: function () {
this.data.imgList = [];
var imgD = this.data.imgList;
imgD = imgD.concat(this.data.pageImgList);
this.setData({
imgList: imgD
});
},
// 数据监听
observers: {
pageImgList(val) {
var that = this;
that.data.imgList = [];
var imgD = this.data.imgList;
imgD = imgD.concat(val);
this.setData({
imgList: imgD
});
}
}
},
/**
* 组件的属性列表
*/
properties: {
pageImgList: {
type: Array,
required: true,
value() {
return [];
}
},
/* 每次选择X张照片 */
imgCount: {
type: Number,
value: 9,
},
/* 最多上传几张照片 */
maxCount: {
type: Number,
value: 9,
},
title: {
type: String,
value: '上传图片',
},
name: {
type: String,
value: ''
},
// 图片类型
category: {
type: String,
value: ' public'
}
},
/**
* 组件的初始数据
*/
data: {
imgList: [],
},
/**
* 组件的方法列表
*/
methods: {
chooseImg() {
var that = this;
wx.chooseImage({
count: this.data.imgCount, //默认9
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
success: (res) => {
// 上传多张图片
that.uploadImg(res.tempFilePaths);
}
});
},
uploadImg(tempFilePaths) {
// 文件上传的函数,返回一个promise
wx.showLoading({ title: '上传中...' })
return new Promise((resolve, reject) => {
var that = this;
var tempImgUrls = that.data.imgList;
for (var i = 0; i < tempFilePaths.length; i++) {
wx.uploadFile({
url: API_URL + 接口地址, //需要用HTTPS,同时在微信公众平台后台添加服务器地址
filePath: tempFilePaths[i], //上传的文件本地地址
name: 'file',
header: {
'content-type': 'multipart/form-data',
'cookie': wx.getStorageSync('cookie')
},
formData: {
category: this.data.category
},
//附近数据,这里为路径
success: function (res) {
wx.hideLoading();
if (res.statusCode == 200) {
var result = JSON.parse(res.data);
if (result.status) {
var imgUrl = result.data;
tempImgUrls.push(imgUrl);
that.setData({
imgList: tempImgUrls
})
if (i == tempFilePaths.length) {
that.triggerEvent("syncImages", {
list: tempImgUrls,
name: that.data.name
});
resolve();
}
} else {
reject(result.errMsg);
}
} else {
reject(res);
}
},
fail: function (err) {
console.log(err);
}
});
}
});
},
delImg(e) {
var that = this;
wx.showModal({
title: '提示',
content: '确定要删除吗?',
success: res => {
if (res.confirm) {
var imgL = that.data.imgList;
imgL.splice(e.currentTarget.dataset.index, 1);
that.setData({
imgList: imgL
})
that.triggerEvent("syncImages", {
list: imgL,
name: that.data.name
});
}
}
})
},
viewImage(e) {
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
}
})
调用该上传组件
1.在父组件的.json文件里先引入该组件
{
"usingComponents": {
"upload-img":"../../components/uploadImg/uploadImg"
}
}
2.在.wxml文件里
<upload-img name="IdCard" pageImgList="{{formInfo.IdCard}}" maxCount="9" bind:syncImages="editImg"></upload-img>
3.在.js文件里
/**
* 页面的初始数据
*/
data: {
formInfo: {
IdCard: []
}
},
加以下方法函数
editImg(e) {
var formD = this.data.formInfo;
formD[e.detail.name] = e.detail.list;
this.setData({
formInfo: formD
})
},