-
首先,在项目的目录中创建一个新的文件夹,作为组件的文件夹,命名为"uploadImage"。
-
在 "uploadImage" 文件夹下创建三个文件:
uploadImage.wxml:组件的模板文件
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<!-- <view class="weui-uploader__hd">
<van-cell required title="上传图片 {{checkimage!=null?checkimage.length:0}}/{{maxCount}}" />
</view> -->
<view class="weui-uploader__bd">
<view style='width: 100%;'>
<view class='tu1'>
<block column-num="3" wx:for="{{checkimage}}" wx:key="index">
<view class='logoinfo'>
<image class='logoinfo' mode="aspectFill" src='{{item.url}}' data-index="{{index}}" bindtap="previewImg" bindlongpress="deleteImg" name="headimage"></image>
</view>
</block>
<view wx:if="{{checkimage.length<maxCount}}" style="margin: 1rem 1rem;" class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}">
<view class="weui-uploader__input" bindtap="upimg"></view>
</view>
</view>
<view class='an1'>
</view>
</view>
</view>
</view>
</view>
</view>
- uploadImage.js:组件的逻辑代码
Component({ /** * 组件的属性列表 */ properties: { // 展示的图片列表 // 最多可上传的图片数量 maxCount: { type: Number, value: 2, }, ImageList:{ type:Array, value:[] } }, /** * 组件的初始数据 */ data: { checkimage: [], //图片 }, /** * 组件的方法列表 */ methods: { //从本地获取照片 async upimg() { var that = this; // console.log("图片上传接口") if (this.data.checkimage.length < that.data.maxCount) { await (function () { new Promise(function (res, rej) { setTimeout(function () { wx.chooseImage({ count: that.data.maxCount - that.data.checkimage.length, //一次性上传到小程序的数量 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { // console.log(res.tempFilePaths) for (var i = 0; i < res.tempFilePaths.length; i++) { wx.uploadFile({ url: getApp().globalData.PER_API + '/sysFile/uploadFile.html', //填写实际接口 filePath: res.tempFilePaths[i], name: 'file', formData: that.data.checkimage, success(res) { let list=that.data.checkimage const image={} image.url=JSON.parse(res.data).url list.push(image) // console.log("已提交发布:", JSON.parse(res.data).url) if (res) { that.setData({ // checkimage: that.data.checkimage.concat(JSON.parse(res.data).url) checkimage:list }) that.handleTap() console.log("图片未转=====:", that.data.checkimage) } }, }) } } }) res(); }, 20) }) }()) } else { wx.showToast({ title: '最多上传' + this.data.maxCount + "张图片", icon: 'loading', duration: 2000 }) } }, handleTap() { let ImageList = this.data.checkimage this.triggerEvent("showTab", ImageList) }, fasdfs() { that.setData({ checkimage: app.formSubmit(that.data.checkimage), }) // console.log("图片:", that.data.checkimage) }, //删除照片功能与预览照片功能 deleteImg(e) { var that = this; var checkimage = that.data.checkimage; var index = e.currentTarget.dataset.index; wx.showModal({ title: '提示', content: '确定要删除此图片吗?', success(res) { if (res.confirm) { // console.log('点击确定了'); checkimage.splice(index, 1); } else if (res.cancel) { // console.log('点击取消了'); return false; } that.setData({ checkimage: checkimage }); that.handleTap() } }) }, previewImg(e) { let imageList=[] this.data.checkimage.forEach(element => { imageList.push(element.url) }); var index = e.currentTarget.dataset.index; var checkimage = this.data.checkimage; var image=checkimage[index].url console.log("图片预览",checkimage[index].url) wx.previewImage({ current: image, urls: imageList }) }, }, observers:{ ImageList:function(newVal){ this.setData({ checkimage:newVal }) console.log("图片数局:",this.data) } }, })
uploadImage.wxss:组件的css样式
/* 图片 */ .weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; } .weui-cell_input { padding-top: 0; padding-bottom: 0; } .weui-uploader__hd { display: -webkit-box; display: -webkit-flex; display: flex; padding-bottom: 10px; align-items: center; } .weui-uploader__title { flex: 1; } .weui-uploader__info { color: #b2b2b2; } .weui-uploader__bd { margin-bottom: -4px; margin-right: -9px; overflow: hidden; } .weui-uploader__file { float: left; margin-right: 9px; margin-bottom: 9px; } .weui-uploader__img { display: block; width: 5.5rem; height: 5.5rem; } .weui-uploader__input-box { float: left; position: relative; margin-right: 9px; margin-bottom: 9px; width: 77px; height: 77px; border: 1px solid #d9d9d9; } .weui-uploader__input-box:before, .weui-uploader__input-box:after { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #d9d9d9; } .weui-uploader__input-box:before { width: 2px; height: 39.5px; } .weui-uploader__input-box:after { width: 39.5px; height: 2px; } .weui-uploader__input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .tu { border: 3rpx solid rgba(0, 0, 0, 0.329); border-radius: 10rpx; height: 60rpx; width: 60rpx; margin: 20rpx 20rpx 20rpx 30rpx; padding: 60rpx 60rpx 60rpx 60rpx; } .logoinfo { height: 5rem; width: 5rem; margin: 10rpx 5rpx; } .tu1 { display: flex; flex-flow: row wrap; align-content: space-around; } .secondary .van-cell__title, .van-cell__value { margin: 0 0.5rem; color: rgb(224, 181, 101); } .colorIdentification .van-cell__title, .van-cell__value{ margin: 0 0.5rem; color: red; } .colorIdentification .van-field__placeholder{ color: rgb(224, 153, 153); } .homework .van-cell-group__title { color: #0b0e13; font-size: var(--cell-group-title-font-size,14px); line-height: var(--cell-group-title-line-height,16px); padding: var(--cell-group-title-padding,16px 16px 8px); }
- 3.在你需要使用图片上传组件的页面的json文件中引入组
{
"usingComponents": {
"uploadImage": "/components/uploadImage/uploadImage"
}
}
- 4.在页面的wxml文件中使用组件
//ImageList 图片集合赋值组件 //maxCount 图片上传数量 <uploadImage maxCount="9" ImageList="{{certificationImage}}" bind:showTab="showCertification"></uploadImage>
5.在页面的js文件中接收组件上传的图片的url集合
-
showCertification(e) { this.data.certificationImage = e.detail },
6.图片上传
-
预览
-
注意:示例中的路径和文件名仅供参考,实际开发中的路径和文件名请根据自己的项目结构和需求进行调整。
通过以上步骤,你就可以封装一个图片上传组件并在小程序中使用了。用户在页面中点击上传按钮时,会弹出选择图片的对话框,选择图片后会将图片上传到指定的服务器地址,并将上传成功后的图片地址保存到组件内部的图片列表中。用户可以通过点击图片删除按钮来删除已上传的图片。