andv vue 实现多张图片上传

1、提示

 注意：：：         便利出来的数组   点击保存需要 把 双引号去掉

 this.formData.image = this.imageUrlList.filter((image) => image !== '')

注意：：：    回显的时候需要 再把 双引号加上          

  this.imageUrlList = data.image.split(',')this.imageUrlList.unshift('') //落地页回显

目的是未来  ""  数组的第一项数据 是给 上传使用的    里面有判断   k==0 的时候  显示上传按钮 是添加操作

有时候还需要检测 数组里面是不是只要 一个 空字符串

  if (this.imageUrlList.includes('')) {} else {this.imageUrlList.unshift('') //落地页回显}

2、具体代码如下

   <divv-for="(itemd, k) in imageUrlList"class="qdsng":key="k"style="display: inline-block; position: relative"><!-- {{ itemd }} --><a-uploadv-if="k == 0"name="avatar"list-type="picture-card"class="avatar-uploader":show-upload-list="false":before-upload="beforeUploads":onRemove="handleRemove"multiplestyle="padding: 0"><div class="ant-upload-text">上传</div></a-upload><a-uploadv-elsename="avatar"list-type="picture-card":show-upload-list="false":before-upload="beforeUploads":onRemove="handleRemove"id="uploadi"><div v-if="itemd != ''" style="width: 100%; height: 100%; margin: 0 auto"><imgv-if="itemd != ''":src="itemd"alt="avatar"style="width: 100%; height: 100%"@click="uploadd(k)"/></div><div v-if="itemd == ''"><div class="ant-upload-text" @click="uploadd(k)">上传</div></div></a-upload><divv-if="itemd != ''"style="position: absolute;top: -2px;right: 3px;z-index: 11111;width: 20px;height: 20px;text-align: center;"@click="handleReset(k)"><a-icon type="close" size="20px" /></div></div>

      imageUrlList: [''],//落地页多张图片dataindex: '',uploadd(data) {if (this.uploadshow) {this.dataindex = data} else {this.$message.success('图片上传中，请稍后')}},handleRemove() {console.log('取消了')},handleReset(k) {this.imgindex = kthis.imageUrlList.splice(this.imgindex, 1)this.$set(this, 'imageUrlList', this.imageUrlList)},beforeUploads(file, fileList) {console.log(file, fileList, '上传的图片个数')this.upimgList = fileList.lengththis.getimng = 1let that = thisthis.loading = trueif (file.type == 'image/png' || file.type == 'image/jpeg') {// const isLt10M = file.size / 1024 / 1024 < 2// if (!isLt10M) {//   return this.$message.error('图片大小不能超过 2MB!')// }} else {return this.$message.error('请上传图片')}let a = new FormData()a.append('file', file)a.append('systemId', 1)if (this.groupDoctorPhoto) {a.append('photoId', this.groupDoctorPhoto.id)}this.uploadshow = falsesavePhoto(a).then((res) => {if (res.code == 200) {if (file.type == 'image/png' || file.type == 'image/jpeg') {this.fileUrl = res.datathis.uploadshow = truethis.loading = false// if(Number(this.upimgList) == this.getimng){//   this.getimng = 1// }else{//   this.getimng = this.getimng + 1//   //  this.loading = false// }if (this.dataindex) {console.log('修改图片')this.imageUrlList[this.dataindex] = res.datathis.dataindex = ''} else {console.log('正常添加图片')this.imageUrlList.push(res.data)}// this.$set(this.imageUrlList, this.dataindex, res.data)// console.log(this.imageUrlList,'图片列表集合')// this.changet('',res)// if (this.imgindex) {//   // console.log('进入修改')//   // this.$nextTick(()=>{//   //   this.dataSource[this.dataindex - 1].photoList[this.imgindex] = res.data//   // })//   this.$set(this.dataSource[this.dataindex - 1][this.dataList], this.imgindex, res.data)//   // (this.dataSource[this.dataindex - 1][this.dataList]).push(res.data)//   this.imgindex = ''// } else {//   // console.log(this.dataSource[this.dataindex - 1], this.dataList, '菩萨和')//   this.dataSource[this.dataindex - 1][this.dataList].push(res.data)// }}}})return false},