上传组件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, //默认9sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有success: (res) => {// 上传多张图片that.uploadImg(res.tempFilePaths);}});},uploadImg(tempFilePaths) {// 文件上传的函数，返回一个promisewx.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})},
