微信小程序上传图片组件,多选+单选+预览+删除

微信小程序上传图片+预览+删除

在这里插入图片描述
组件代码

HTML

<view class="uploadImg-wrap">
    <view class="upload-flex">
        <view wx:if="{{imgs.length!==total}}" bindtap='toUpload' class="upload-item" style="width:{{itemWidth}}px;height:{{itemWidth}}px">
            <view class="iconfont icon-upload"></view>
            <view class="upload-text">上传图片</view>
        </view>
        <view bindtap='preview' wx:for="{{imgs}}" wx:key="key" class="upload-item-1" style="width:{{itemWidth}}px;height:{{itemWidth}}px" data-url='{{item}}'>
            <image mode="aspectFit" style="width:100%;height:100%" src="{{item}}"></image>
            <view catchtap='del' data-url='{{item}}' class="upload-close">
                <view class="iconfont icon-close" style="font-size:28rpx"></view>
            </view>
        </view>
    </view>
</view>

CSS

@font-face {
    font-family: 'iconfont';  /* Project id 2580604 */
    src: url('//at.alicdn.com/t/font_2580604_kuvkydxjryh.woff2?t=1622731856871') format('woff2'),
         url('//at.alicdn.com/t/font_2580604_kuvkydxjryh.woff?t=1622731856871') format('woff'),
         url('//at.alicdn.com/t/font_2580604_kuvkydxjryh.ttf?t=1622731856871') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-close:before {
    content: "\e668";
  }
  
  .icon-upload:before {
    content: "\e682";
  }
  
  .icon-caps-lock:before {
    content: "\e667";
  }
  
  .icon-switch:before {
    content: "\e67f";
  }
  
  .icon-arrow-right:before {
    content: "\e665";
  }
  
  .icon-search:before {
    content: "\e67d";
  }
  
  .icon-arrow-left-bold:before {
    content: "\e685";
  }
  .uploadImg-wrap {
      width: 100%;
  }
  .upload-item {
      border: 1rpx solid rgb(226, 226, 226);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
  }
  .upload-text {
      font-size: 28rpx;
  }
  .upload-flex {
      display: flex;
      flex-wrap: wrap;
  }
  .upload-item-1 {
    border: 1rpx solid rgb(226, 226, 226);
    padding: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}
.upload-close {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border: 1rpx solid rgb(116, 116, 116);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(116, 116, 116);
}

JS

Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    ready: function () {
      let that = this
      this.createSelectorQuery().select('.uploadImg-wrap').boundingClientRect(rect => {
        that.setData({
          itemWidth: rect.width / 4
        })
        console.log(rect.width);
      }).exec();
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
  //上传图片接口
    uploadUrl: {
      type: String,
      value: 'https://example.weixin.qq.com/upload'
    },
    //最大一次性图片数
    count: {
      type: Number,
      value: 4
    },
    //总图片数
    total: {
      type: Number,
      value: 4
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    itemWidth: 0,
    imgs: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //预览
    preview(options){
      let imgs = this.data.imgs
      //后端返回只有名字
      // let newimgs = []
      // imgs.forEach(value=>{
      //   newimgs.push('服务器url' +value)
      // })
      // wx.previewImage({
      //   current: '服务器url'+options.currentTarget.dataset.url,
      //   urls: newimgs
      // })

      //后端返回的图片具体路径
      wx.previewImage({
        current: options.currentTarget.dataset.url,
        urls: imgs
      })
    },
    //删除图片
    del(options){
      let url = options.currentTarget.dataset.url
      let oldimgs = this.data.imgs
      let imgs = oldimgs.filter(value=>{
        if(value!=url){
          return value
        }
      })
      this.setData({
        imgs
      })
    },
    //上传图片
    upload(tempFilePaths, i) {
      wx.showLoading({
        title: '上传中',
      })
      let that = this
      wx.uploadFile({
        url: that.data.uploadUrl,
        filePath: tempFilePaths[i],
        name: 'file',
        success(r) {
          //这里只需要修改JSON.parse(r.data).data.url 确保得到的是图片路径,取数据按实际返回结果
          let url = JSON.parse(r.data).data.url
          //end
          let imgs = that.data.imgs
          imgs.push(url)
          that.setData({
            imgs
          }, _ => {
            that.triggerEvent("action",that.data.imgs);
            if (i == tempFilePaths.length - 1) {
              wx.hideLoading()
              return
            }
            that.upload(tempFilePaths, i + 1)
          })
        }
      })
    },
    toUpload() {
      let that = this
      wx.chooseImage({
        count: that.data.count,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          let tempFilePaths = res.tempFilePaths
          that.upload(tempFilePaths, 0)
        }
      })
    },
  }
})

页面调用

<uploadImg uploadUrl='上传图片接口' bind:action='action'></uploadImg>

JS

const app = getApp()

Page({
  data: {
    show:'none'
  },
//组件上传文件图片后调用的当前页面方法
  action(data){
    console.log('图片路径',data.detail)
  },
  
  onLoad() {
    
  },
})
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序的select组件是一个下拉列表择的功能组件,它可以让用户从设的项中择一个或多个项。在多功能中,用户可以同时择多个项。 对于实现select组件的多功能,我们可以使用checkbox组件来实现。首先,我们可以在select组件的模板中添加一个checkbox组件,用于显示每个项的择状态。同时,我们还可以在每个项的数据中添加一个checked属性,用于记录该项是否被中。 当用户点击某个项的时候,我们可以在对应的事件处理函数中,通过改变checkbox组件的checked属性的值,来更新每个项的择状态。同时,我们还可以使用wx:for循环语法来动态渲染每个项的checkbox组件。 在用户提交择的时候,我们可以通过遍历每个项的数据,获取中状态为true的项的值,从而获取到用户择的多个项。 在代码实现上,我们可以创建一个数组来存储每个项的数据,其中每个数据对象包含项的值和择状态。用户点击项时,通过改变数组中对应项数据的择状态,然后通过数组的遍历操作,来获取中状态为true的项的值。 在使用多功能的时候,我们需要注意用户体验的问题。例如,可以在项的文字左侧或右侧显示一个小图标,用于表示该项的择状态。同时,用户在择多个项时,需要提供一个“完成”按钮,用于提交择。 总结起来,微信小程序的select组件可以通过使用checkbox来实现多功能,通过设置项的择状态和监听点击事件来达到择多个项的目的。同时,为了提升用户体验,我们还可以通过图标和“完成”按钮等方式来辅助用户完成择操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值