微信小程序实现上传多张图片、删除图片-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

微信小程序实现上传多张图片、删除图片

[导读]:最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图 效果图: 下面直接展示代码:wxml view class = addInput 宣传画廊: view class = wai block wx:for = {{files}} wx:key = *this view class...
  最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图
  效果图:

  下面直接展示代码:wxml

  <view class="addInput">
    宣传画廊:
    <view class="wai">
      <block wx:for="{{files}}wx:key="*this">
      <view class="weui-uploader__filebindtap="previewImageid="{{item}}">
        <image class="weui-uploader__imgsrc="{{item}}mode="aspectFill" />
        <image wx:if="{{files.length>0}}class="icon-deletesrc="../../../../static/images/icon_close.png"
          bindtap="deleteImg2">image>
      view>
    block>
    view>
    <button class="imgButtonbindtap="chooseImage2"  wx:if="{{ files.length < 5 }}">添加画廊button>
  view>
  下面直接展示代码:js
  // 删除图片
  deleteImg2:function(e) {
    let self = this;
    let index = e.target.dataset.index;
    let files = self.data.files;
    let image = self.data.image;
    image.splice(index, 1);
    files.splice(index, 1);
    this.setData({
      image: image,
      files: files
    })
  },
// 添加画廊
  chooseImage2: function (e) {
    if (this.data.files.length >= 5{
      util.showErrorToast('只能上传5张照片')
      return false;
    }
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.setData({
          files: that.data.files.concat(res.tempFilePaths)
        });
        console.log("files", that.data.files)
        that.upload(res);
      }
    })
  },

upload: function (res) {
    var that = this;
    const uploadTask = wx.uploadFile({
      url: api.StorageUpload,
      filePath: res.tempFilePaths[0],
      name: 'file',
      success: function (res) {
        var _res = JSON.parse(res.data);
        if (_res.errno === 0{
          var url = _res.data.url
          that.data.image.push(url)
          that.setData({
            hasPicture: 1,
            image: that.data.image
          })
          console.log('图片', that.data.image)
        }
      },
      fail: function (e) {
        wx.showModal({
          title: '错误',
          content: '上传失败',
          showCancel: false
        })
      },
    })
    uploadTask.onProgressUpdate((res) => {})
  },

有问题私聊作者 点个小心心 感谢

本文来自阿习进阶博客,如若转载,请注明出处:http://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ