andv vue 实现多张图片上传

1、提示

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

javascript 复制代码

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

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

javascript 复制代码

  this.imageUrlList = data.image.split(',')

        this.imageUrlList.unshift('') //落地页回显

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

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

javascript 复制代码

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

2、具体代码如下

html 复制代码

   <div
                v-for="(itemd, k) in imageUrlList"
                class="qdsng"
                :key="k"
                style="display: inline-block; position: relative"
              >
                <!-- {{ itemd }} -->
                <a-upload
                  v-if="k == 0"
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :before-upload="beforeUploads"
                  :onRemove="handleRemove"
                  multiple
                  style="padding: 0"
                >
                  <div class="ant-upload-text">上传</div></a-upload
                >
                <a-upload
                  v-else
                  name="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">
                    <img
                      v-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>
                <div
                  v-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>

javascript 复制代码

      imageUrlList: [''],//落地页多张图片

      dataindex: '',



  uploadd(data) {
      if (this.uploadshow) {
        this.dataindex = data
      } else {
        this.$message.success('图片上传中，请稍后')
      }
    },


   handleRemove() {
      console.log('取消了')
    },


   handleReset(k) {
      this.imgindex = k
      this.imageUrlList.splice(this.imgindex, 1)

      this.$set(this, 'imageUrlList', this.imageUrlList)
    },

 beforeUploads(file, fileList) {
      console.log(file, fileList, '上传的图片个数')
      this.upimgList = fileList.length
      this.getimng = 1
      let that = this
      this.loading = true
      if (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 = false
      savePhoto(a).then((res) => {
        if (res.code == 200) {
          if (file.type == 'image/png' || file.type == 'image/jpeg') {
            this.fileUrl = res.data
            this.uploadshow = true
            this.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.data
              this.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
    },