AI 助理
备案控制台
开发者社区 云计算 文章 正文

uniapp上传多张图片-带删除按钮查看大图效果demo（整理）

2023-09-16 152
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： uniapp上传多张图片-带删除按钮查看大图效果demo（整理） 

<template>
  <view class="register">
    <view class="registerBox">
      <view class="hintBox row-me row-center">
        <image src="../../static/img/icon_hb.png" mode="" class="img"></image>
        <view class="txt">提交信息领红包，信息越全红包越大</view>
      </view>
      <view class="info">
        <view class="address flex-align" @click="goNewPage('/pages/clientDitch/address')">
          <view class="txt">房型</view>
          <view class="put">
            <view class="txtRss">请选择房型</view>
            <view>
              <image src="../../static/img/btn_tz.png" mode="widthFix" class="RiImg"></image>
            </view>
          </view>
        </view>
        <view class="cardTxt">
          <view class="txt">上传房型图（{{fangXingImg.length}}/9）</view>
        </view>
        <view class="houseType">
          <view class="houseImg" v-for="(item,index) in fangXingImg">
            <image :src="item" @click="preViewImg('fangXingImg',item)" mode="widthFix" class="img">
            </image>
            <image @click="deletePic('fangXingImg',index)" src="../../static/img/delete.png" mode="widthFix"
              class="deleteImg">
            </image>
          </view>
          <view class="addImg flex-center" @click="addPic('fangXing')" v-if="fangXingImg.length <9">
            <image src="../../static/img/tjzp.png" mode="widthFix" class="img" />
            </image>
            <view class="txt">添加图片</view>
          </view>
        </view>
        <view class="border"></view>
        <view class="address flex-align" @click="goNewPage('/pages/clientDitch/address')">
          <view class="txt">户型</view>
          <view class="put">
            <view class="txtRss">请选择户型</view>
            <view>
              <image src="../../static/img/btn_tz.png" mode="widthFix" class="RiImg"></image>
            </view>
          </view>
        </view>
        <view class="cardTxt">
          <view class="txt">上传户型图（{{huXingImg.length}}/9）</view>
        </view>
        <view class="houseType">
          <view class="houseImg" v-for="(item,index) in huXingImg">
            <image :src="item" @click="preViewImg('houseImg',item)" mode="widthFix" class="img"></image>
            <image @click="deletePic('huXingImg',index)" src="../../static/img/delete.png" mode="widthFix"
              class="deleteImg"></image>
          </view>
          <view class="addImg flex-center" @click="addPic('huXing')" v-if="huXingImg.length <9">
            <image src="../../static/img/tjzp.png" mode="widthFix" class="img"></image>
            <view class="txt">添加图片</view>
          </view>
        </view>
        <view class="border"></view>
        <view class="average flex-align">
          <view class="txt">面积</view>
          <view class="areaBox">
            <view class="put flex-align">
              <view class="txt01">单层</view>
              <input type="text" value="" v-model="deposit" placeholder="请输入"
                placeholder-style="color: #CCC;" />
              <view class="txt01">m²</view>
            </view>
            <view class="put flex-align">
              <view class="txt01">全屋</view>
              <input type="text" value="" v-model="deposit" placeholder="请输入"
                placeholder-style="color: #CCC;" />
              <view class="txt01">m²</view>
            </view>
          </view>
        </view>
      </view>
      <view class="selection">
        <view class="title flex-align">
          <view class="border"></view>功能选择
        </view>
        <view class="multipleChoice">
          <view class="label-con u-justify-start u-items-center u-flex-wrap">
            <view class="label-list" :class="{'active': isActive.indexOf(index)!=-1}"
              v-for="(item,index) in tagList" :key="index" @click="addMemberTags(index)">
              {{ item.tag_name }}
            </view>
          </view>
          <view class="textareaTxt">
            <textarea class="textarea" :value="descript" @input="inputHandle($event,'descript')"
              placeholder="若有特殊需求，请输入" placeholder-style="color: #CCC;" maxlength="100" />
            <view class="numTxt">
              {{descriptNum}}/100
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="height210"></view>
    <view class="bottom">
      <view class="entryLr" @click="entryLrClick()">
        跳过
      </view>
      <view class="submitIn" @click="submitInClick()">
        提交
      </view>
    </view>
    <view class="redPacket" v-if="openHide == 1">
      <view class="bg"></view>
      <view class="main">
        <view class="cen">
          <image src="../../static/img/bghb.png" mode="widthFix" class="bgImg"></image>
          <image src="../../static/img/logo.png" mode="widthFix" class="logoImg"></image>
          <view class="txt">恭喜发财，大吉大利</view>
          <image src="../../static/img/open.png" mode="widthFix" class="openImg" @click="openImgClick()">
          </image>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        deposit: '',
        isActive: [],
        tagList: [{
            tag_name: '测试1',
          },
          {
            tag_name: '测试2',
          },
          {
            tag_name: '测试3',
          },
        ],
        descriptNum: '0', //文本域数量
        descript: '',
        openHide: '0',
        fangXingImg: [],
        huXingImg: []
      }
    },
    // 页面加载
    onLoad(e) {
      uni.hideTabBar(); //不让底部显示tab选项
      uni.setNavigationBarTitle({ //动态设置页面title
        // title: '新的标题',
      });
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      // 点击提交
      submitInClick() {
        this.openHide = 1
      },
      // 点击红包
      openImgClick() {
        this.openHide = 0
        uni.navigateTo({
          url: '/pages/clientDitch/bearMind'
        })
      },
      // 点击跳过
      entryLrClick() {
        uni.navigateTo({
          url: '/pages/clientDitch/preference'
        })
      },
      // 文本域数量
      inputHandle(e, key) {
        // let value=(typeof e.detail=='object')?e.detail.value:e.detail
        // if(key=='descript'&&value.length>10&&value.length>this.form[key].length){
        //  // this.showPopup=true
        // }
        // console.log(e)
        // console.log(key)
        // this.form[key]=value
        console.log(e.detail.cursor, '111')
        this.descriptNum = e.detail.cursor
      },
      // 点击功能选择
      addMemberTags(index) {
        console.log(index, '点击的第几个')
        if (this.isActive.indexOf(index) == -1) {
          console.log(index) //打印下标
          this.isActive.push(index); //选中添加到数组里
        } else {
          this.isActive.splice(this.isActive.indexOf(index), 1); //取消
        }
      },
      // 点击个人信息录入
      personMesClick() {
        uni.navigateTo({
          url: '/pages/clientDitch/personMes'
        })
      },
      //获取数据
      getData() {
        this.$.ajax("POST", "/xxxxx/xxxxx", {
          xxxxx: '',
        }, (res) => {
          if (res) {
          }
        });
      },
      //上传图片，户型和房型
      addPic(type) {
        uni.chooseImage({
          count: 9,
          success: (res) => {
            // show('图片上传中...');
            uni.showLoading({
              title: "图片上传中...",
              mask: true,
            })
            console.log(res,'231')
            if (type === 'fangXing') {
              let tempList = [...this.fangXingImg, ...res.tempFilePaths] //临时显示
              if (tempList.length > 9) {
                //提示用户 最多只能上传9张
                uni.showToast({
                  title: '最多只能上传9张图片哦～'
                });
              } else {
                this.fangXingImg = tempList
                uni.hideLoading();
              }
            } else {
              let tempList = [...this.huXingImg, ...res.tempFilePaths] //临时显示
              if (tempList.length > 9) {
                //提示用户 最多只能上传9张
              } else {
                this.huXingImg = tempList
                uni.hideLoading();
              }
            }
            //TODO 上传 后面上传到服务器 就传fangXingImg、huXingImg这个数组里保存的临时路径获取            
          }
        })
      },
      //删除上传
      deletePic(type, index) {
        if (type === 'fangXingImg') {
          this.fangXingImg.splice(index, 1)
        } else {
          this.huXingImg.splice(index, 1)
        }
      },
      //点击打开预览
      preViewImg(type, currentSrc) {
        uni.previewImage({
          current: currentSrc,
          urls: type == 'fangXingImg' ? this.fangXingImg : this.huXingImg //需要预览的图片链接列表 
        })
      }
    },
    // 计算属性
    computed: {
    },
    // 侦听器
    watch: {
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
  }
</script>
<style lang="scss" scoped>
  .register {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background: #F6F6F6;
    .redPacket {
      width: 100%;
      height: 100%;
      .bg {
        width: 100%;
        height: 100%;
        background: #000;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.5;
        z-index: 99999;
      }
      .main {
        width: 578rpx;
        height: 956rpx;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -289rpx;
        margin-top: -478rpx;
        z-index: 999999;
        .cen {
          width: 578rpx;
          height: 956rpx;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          .bgImg {
            position: absolute;
            top: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
          }
          .logoImg {
            width: 245rpx;
            height: 119rpx;
            margin-top: 139rpx;
            margin-bottom: 50rpx;
          }
          .txt {
            font-size: 44rpx;
            color: #FFE993;
            margin-bottom: 318rpx;
          }
          .openImg {
            width: 180rpx;
            height: 180rpx;
          }
        }
        // background-image: url(../../static/img/bghb.png);
      }
    }
    .registerBox {
      .hintBox {
        height: 80rpx;
        background: #FFEEEE;
        margin-bottom: 20rpx;
        .img {
          width: 30rpx !important;
          height: 30rpx !important;
          margin-right: 16rpx;
          margin-left: 30rpx;
        }
        .txt {
          font-size: 26rpx;
          color: #222222;
        }
      }
      .info {
        margin-left: 30rpx;
        margin-right: 30rpx;
        background: #fff;
        border-radius: 20rpx;
        .address {
          margin-left: 30rpx;
          margin-right: 30rpx;
          height: 110rpx;
          border-bottom: 1rpx solid #ECECEC;
          .txt {
            width: 239rpx;
            font-size: 30rpx;
            color: #222222;
            text-align: left;
          }
          .put {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .txtRss {
              font-size: 30rpx;
              color: #CCCCCC;
            }
            .RiImg {
              width: 15rpx;
              height: 26rpx;
            }
          }
        }
        .cardTxt {
          margin-left: 30rpx;
          height: 110rpx;
          line-height: 110rpx;
        }
        .houseType {
          overflow: hidden;
          margin-left: 30rpx;
          .houseImg {
            width: 195rpx;
            height: 195rpx;
            border: 1rpx solid #ECECEC;
            border-radius: 10rpx;
            position: relative;
            float: left;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            .img {
              width: 195rpx !important;
              height: 195rpx !important;
            }
            .deleteImg {
              width: 40rpx;
              height: 40rpx;
              position: absolute;
              right: 10rpx;
              top: 10rpx;
            }
          }
          .addImg {
            width: 196rpx;
            height: 196rpx;
            background: #F6F6F6;
            margin-bottom: 20rpx;
            .img {
              width: 63rpx;
              height: 63rpx;
            }
            .txt {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
        .border {
          margin-left: 30rpx;
          margin-right: 30rpx;
          margin-top: 34rpx;
          border-bottom: 1rpx solid #ECECEC;
        }
        .average {
          height: 170rpx;
          // border-bottom: 1px solid #ECECEC;
          .txt {
            width: 90rpx;
            font-size: 30rpx;
            color: #222222;
            text-align: left;
            margin-left: 30rpx;
          }
          .areaBox {
            display: flex;
            flex-direction: column;
            .put {
              margin-bottom: 18rpx;
              input {
                max-width: 150rpx;
                height: 42rpx;
                line-height: 42rpx;
                font-size: 30rpx;
                color: #222222;
                margin-left: 30rpx;
                // background: red;
              }
              .txt01 {
                font-size: 30rpx;
                color: #222222;
                margin-left: 30rpx;
              }
            }
          }
        }
      }
      .selection {
        margin-top: 20rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
        padding-top: 29rpx;
        padding-bottom: 30rpx;
        background: #fff;
        border-radius: 20rpx;
        .title {
          font-size: 30rpx;
          font-weight: bold;
          color: #222222;
          margin-left: 30rpx;
          margin-right: 30rpx;
          padding-bottom: 29rpx;
          border-bottom: 1rpx solid #ECECEC;
          .border {
            width: 6rpx;
            height: 30rpx;
            background: #4281EA;
            border-radius: 4rpx;
            margin-right: 24rpx;
          }
        }
        .multipleChoice {
          .label-list {
            margin-left: 30rpx;
            margin-right: 30rpx;
            height: 42rpx;
            padding-bottom: 34rpx;
            padding-top: 34rpx;
            font-size: 30rpx;
            color: #222222;
            border-bottom: 1rpx solid #ECECEC;
            background-image: url(../../static/img/btn_xz.png);
            background-position: left;
            background-size: 38rpx 38rpx;
            background-repeat: no-repeat;
            text-indent: 60rpx;
          }
          .active {
            color: #4281EA !important;
            background-image: url(../../static/img/btn_yxz.png) !important;
          }
          .textareaTxt {
            margin-top: 30rpx;
            margin-left: 30rpx;
            margin-right: 30rpx;
            height: 254rpx;
            background: #F6F6F6;
            border-radius: 10rpx;
            .textarea {
              width: 93%;
              height: 181rpx;
              padding-left: 20rpx;
              padding-right: 20rpx;
              padding-top: 20rpx;
              font-size: 28rpx;
              color: #222222;
            }
            .numTxt {
              font-size: 30rpx;
              color: #CCCCCC;
              text-align: right;
              padding-bottom: 20rpx;
              margin-right: 30rpx;
            }
          }
        }
      }
    }
    .bottom {
      width: 100%;
      height: 132rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      z-index: 999;
      // margin-bottom: 22rpx;
      // margin-top: 100rpx;
      .entryLr {
        width: 240rpx;
        height: 80rpx;
        line-height: 80rpx;
        border: 2rpx solid #4281EA;
        border-radius: 20rpx;
        text-align: center;
        font-size: 30rpx;
        color: #4281EA;
        margin-left: 30rpx;
      }
      .submitIn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: linear-gradient(89deg, #6363F2 0%, #4281EA 100%);
        border-radius: 20rpx;
        text-align: center;
        font-size: 30rpx;
        color: #FFFFFF;
        margin-left: 20rpx;
        margin-right: 30rpx;
      }
    }
  }
</style>
关键词：
uniapp按钮demo
兜里只有三分钱~
目录
相关文章
破浪前进
|
7月前
|
存储 开发框架 JavaScript
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
破浪前进
513 0
特创码农
|
7月前
Uniapp 各类 button按钮
Uniapp 各类 button按钮
特创码农
74 0
晓同哇哇~
|
7月前
|
小程序 搜索推荐
uniapp中如何使用image图片
uniapp中如何使用image图片
晓同哇哇~
1562 0
兜里只有三分钱~
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
兜里只有三分钱~
225 0
diygwcom
|
2月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
diygwcom
92 0
肥晨
|
4月前
|
小程序 前端开发
uniapp微信小程序本地和真机调试文件图片上传成功但体验版不成功
【8月更文挑战第5天】
肥晨
202 2
朝阳39
|
5月前
|
存储
uniapp实战 -- 个人信息维护（含选择图片 uni.chooseMedia，上传文件 uni.uploadFile，获取和更新表单数据）
uniapp实战 -- 个人信息维护（含选择图片 uni.chooseMedia，上传文件 uni.uploadFile，获取和更新表单数据）
朝阳39
185 2
晓同哇哇~
|
7月前
|
移动开发 小程序 API
uniapp中各种状态的按钮
uniapp中各种状态的按钮
晓同哇哇~
387 0
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
wishCoding
57 0
开朗觉觉
|
7月前
uniapp下载图片到本地
uniapp下载图片到本地
开朗觉觉
116 0