antdvue 上传图片最多四张,有预览删除

<template>
  <div ref="classReview">
    <a-modal
        :body-style="modalStyle"
        :confirm-loading="confirmLoading"
        :footer="null"
        :getContainer="()=>$refs.classReview"
        :visible="isVisible"
        :width="600"
        title="点评课程"
        @cancel="handleCancel"
    >
      <div class="modalBox">
        <div class="infoBox flex flex-sb">
          <span>学期</span>
          <span>教学周</span>
          <span>课程</span>
          <span>老师</span>
        </div>
        <div class="formBox">
          <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="rules"
              layout="vertical"
          >
            <a-form-model-item label="评价得分(满分100)" prop="score">
              <a-input v-model="form.score"></a-input>

            </a-form-model-item>
            <a-form-model-item label="上传照片(最多4张)" prop="urlList">
              <input
                  id="uplode"
                  ref="imgFile"
                  accept=".jpeg,.png,.gif,.jpg"
                  hidden
                  multiple="multiple"
                  type="file"
                  @change="uploadFile($event)"
              />
              <!--          图片预览-->
              <div class="imgsBox flex">
                <div v-for="(urlImg,uIndex) in form.urlList" class="imgBox">
                  <img :src="urlImg">
                  <div class="previewIcon">
                    <a-icon :style="{fontSize:'20px',marginRight:'16px'}" type="eye" @click="previewImg(urlImg)"/>
                    <a-icon :style="{fontSize:'20px'}" type="delete" @click="delImg(uIndex)"/>
                  </div>
                </div>

                <div v-if="form.urlList.length<4" class="uploadBox" @click="$refs.imgFile.click()">
                  <a-icon type="plus"/>
                  <span>文件上传</span>

                  <a-modal :footer="null" :visible="previewVisible" @cancel="previewVisible=false">
                    <img :src="previewImage" alt="example" style="width: 100%"/>
                  </a-modal>
                </div>
              </div>

            </a-form-model-item>
            <a-form-model-item label="意见与建议(200字内)" prop="advice">
              <a-input v-model="form.advice" :auto-size="{ minRows: 3, maxRows: 10 }" :maxLength="200"
                       type="textarea"></a-input>

            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 8, offset: 16 }">

          <span class="btn_default" style="margin-left: 10px;" @click="handleCancel">
            取消
          </span>

              <span class="btn_primary" @click="submitForm">
            提交
          </span>
            </a-form-model-item>
          </a-form-model>


        </div>
      </div>
    </a-modal>
  </div>

</template>

<script>
import Cookies from "js-cookie";

const modalStyle = {
  height: '500px',
  width: '600px',
  overflowY: 'scroll'
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  components: {},
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: String
    },

  },
  data() {

    return {
      modalStyle,
      confirmLoading: false,
      previewVisible: false,
      previewImage: '',
      labelCol: {span: 8},
      wrapperCol: {span: 10},
      other: '',
      form: {
        score: 0,
        urlList: [],
        advice: ''

      },
      rules: {
        score: [{
          required: true,
          pattern:/^100$|^(\d|[1-9]\d)(\.\d{1,4})*$/,
          message: '请输入1-100数字,最多可保留四位小数',
          trigger: 'change'
        },],
        advice: [{required: true, message: '请填写问卷须知', trigger: ['blur', 'change']}],


      },
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.isShowDialog
      },
      set(val) {
        this.$emit('update:isShowDialog', val)
      }
    }
  },
  mounted() {
  },
  methods: {

    uploadFile(e) {
      let files = e.target.files;
      let file = files[0];
      let formData = new FormData();
      formData.append('file', file);
      console.log("文件:", formData);
      api.uploadFile(formData).then((res) => {
        if (res.code === 200) {
          this.form.urlList.push(res.data.HttpUrl)
        }
      })
    },
    previewImg(url) {
      this.previewImage = url
      this.previewVisible = true;
    },
    delImg(index) {
      this.form.urlList.splice(index, 1)
    },
    handleCancel(e) {
      this.$emit('update:isShowDialog', false)
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log('submit!', this.form);
          this.$emit('updateReviews',this.form)
          this.$emit('update:isShowDialog',false)
          // api.saveQInfo(this.form).then(res => {
          //   if (res.code == 200) {
          //     this.$message.success('提交成功!')
          //     this.questionnaireId = res.data.questionnaireId
          //     let temp = {
          //       "copyQuestionnaireId": this.questionnaireId,
          //       "questionnaireId": this.oldQuestionnaireId
          //     }
          //     api.copyQuestion(temp).then(res => {
          //
          //     })
          //     this.current++
          //   }
          // })
        } else {
          console.log('error submit!!', this.form);
          return false;
        }
      });

    },

  }

}
</script>

<style lang="less" scoped>
@import "@/style/variables.less";

/deep/ .ant-modal-header {
  border-bottom: none;
}

.formBox {
  .imgsBox {
    .imgBox {
      position: relative;
      margin-right: 12px;

      img {
        width: 100px;
        height: 100px;
      }

      .previewIcon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: transparent;

        &:hover {
          display: block;
          color: #fff;
          background-color: rgba(255, 255, 255, .5);
        }
      }


    }

    .uploadBox {
      width: 100px;
      height: 100px;
      border: 1px solid #e7e7e7;
      color: #999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }


}
</style>