vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

let that = this
reader.readAsDataURL(file)
reader.onload = function (e) {
console.log(this.result)
that.imgUrls.push(this.result)
}
}
// 剩余张数
this.leftImages = this.maxImages - (this.imgUrls.length + e.target.files.length)
this.pictureNums = String(this.maxImages - (this.imgUrls.length + e.target.files.length)) + '/' + String(this.maxImages)
} else {
Toast('只能选择' + (this.maxImages - this.imgUrls.length) + '张了')
}
},
//删除
delect (index) {
this.imgUrls.splice(index, 1)
this.leftImages++
console.log('数量' + this.leftImages)
if (this.leftImages == this.maxImages) {
this.pictureNums = '上传图片'
} else {
this.pictureNums = String(this.leftImages) + '/' + String(this.maxImages)
}
},
//轮播图滑动改变index
handleChange(index){
this.num = index
},
//看大图
bigImg (index) {
this.showBigImg = true
this.num = index
}
}

样式如下

<template>
 <div class="avatar">
  <!--展示图片-->
  <div class="hasPic" v-if="imgUrls.length>0" v-for="(item,index) in imgUrls">
  <img class="seledPic" ref="picture" :src="item?item:require('../../static/images/imagebj.jpg')" name="avatar" @click="bigImg(index)">
  <img class="delect" src="../../static/images/del.png" @click="delect(index)">
  </div>
  <!--点击方法图左右滑动-->
  <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
  <div class="showImg">
   <mt-swipe :auto="0" :show-indicators="false" @change="handleChange" :continuous="false" :defaultIndex="num">
   <mt-swipe-item v-for="(item,index) in imgUrls" :key="item.id">
    <div class="num" >{{index+1+'/'+imgUrls.length}}</div>
    <img :src="imgUrls[index]" class="img"/>
   </mt-swipe-item>
   </mt-swipe>
  </div>
  </div>
  <!--默认图片-->
  <div class="selPic" v-if="imgUrls.length<6">
  <img src="../../static/images/imagebj.jpg" name="avatar">
  <span>{{pictureNums}}</span>
  <input type="file" class="input-file" multiple="multiple" name="avatar" ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png">
  </div>
 </div>
 </template>

完整项目地址为：https://github.com/dt8888/publicComment

注意点：

1.项目中用到了mint -ui，转移项目中录播图代码时，会报错，在终端项目中输入：npm i mint-ui -S

 用到了px和rem自动转化  https://www.jb51.net/article/149721.htm

总结

以上所述是小编给大家介绍的vue实现类似淘宝商品评价页面星级评价及上传多张图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！