微信小程序图片上传组件

1. 首先，在项目的目录中创建一个新的文件夹，作为组件的文件夹，命名为"uploadImage"。

2. 在 "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.图片上传

• 

   预览

• 

   

  注意：示例中的路径和文件名仅供参考，实际开发中的路径和文件名请根据自己的项目结构和需求进行调整。

  通过以上步骤，你就可以封装一个图片上传组件并在小程序中使用了。用户在页面中点击上传按钮时，会弹出选择图片的对话框，选择图片后会将图片上传到指定的服务器地址，并将上传成功后的图片地址保存到组件内部的图片列表中。用户可以通过点击图片删除按钮来删除已上传的图片。