dialog.vue

<!-- 采集人脸、更新人脸 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    top="6vh"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <ele-form
      ref="submitRef"
      v-model="formData"
      inline
      :form-desc="formDesc"
      :is-show-submit-btn="false"
      :is-show-error-notify="false"
    >
      <template v-slot:file>
        <!-- 【主要代码】 -->
        <el-upload
          ref="uploadRef"
          v-loading="uploadLoading"
          class="upload_demo"
          list-type="picture-card"
          accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG"
          action="/api/XXX/upload/oss/fileupload"
          name="files"
          :file-list="fileList"
          :headers="{ 'X-Token': getToken() }"
          :data="{ relativePath: 'face/' }"
          :on-success="onSuccessHandler"
          :on-error="onErrorHandler"
          :on-remove="onRemoveHandler"
          :before-upload="beforeUploadHandler"
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{ file }">
            <el-image
              :id="'image' + file.uid"
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              :preview-src-list="[file.url]"
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in" />
              </span>
              <span class="el-upload-list__item-delete" @click="onRemoveHandler(file)">
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
      </template>
    </ele-form>
    <template v-slot:footer>
      <el-button size="mini" @click="handleClose">取消</el-button>
      <el-button type="primary" size="mini" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/tool'
import { addFace } from '@/api/file_cabinet.js'
import { operationFormDesc } from '../constant/formList'

export default {
  name: 'OperationDialog',
  components: {},

  data() {
    return {
      dialogVisible: false,
      dialogType: '',
      rowData: {},
      formData: {
        file: []
      },
      uploadLoading: false,
      fileList: [],
      getToken
    }
  },

  computed: {
    title() {
      return this.dialogType === 'add' ? '采集人脸' : '更新人脸'
    },
    formDesc() {
      // return operationFormDesc(this)
      return {
	    xm: {
	      type: 'input',
	      label: '姓名',
	      layout: 24,
	      disabled: true
	    },
	    sfzmhm: {
	      type: 'input',
	      label: '身份证号码',
	      layout: 24,
	      disabled: true
	    },
	    dwmc: {
	      type: 'input',
	      label: '所属部门',
	      layout: 24,
	      disabled: true
	    },
	    sjhm: {
	      type: 'input',
	      label: '手机号码',
	      layout: 24,
	      disabled: true
	    },
	    file: {
	      type: 'upload',
	      label: '人脸信息',
	      layout: 24,
	      required: true
	    }
	  }
    }
  },

  watch: {
    dialogVisible() {
      this.$refs.submitRef &&
        this.$refs.submitRef.$refs.form &&
        this.$refs.submitRef.$refs.form.clearValidate()
    },
    'formData.file': {
      handler(val) {
        console.log('val.length----', val.length)
        const dom = document.querySelector('.el-upload--picture-card')
        // 【注意】限制只能传一张照片，有已传照片时就不显示上传控件
        if (val.length) {
          dom && (dom.style.display = 'none')
        } else {
          dom && (dom.style.display = 'inline-block')
        }
      }
    }
  },

  created() {},

  methods: {
    open(type, rowData) {
      this.dialogType = type
      this.rowData = rowData
      Object.keys(this.formDesc).forEach((key) => {
        key !== 'file' && this.$set(this.formData, key, rowData[key])
      })
      this.dialogVisible = true
    },
    beforeUploadHandler(file) {
      const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
      const types = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG']
      const isLt = file.size / 1024 / 1024 < 5

      if (!types.includes(ext)) {
        this.$message.error(`请上传${types.map((item) => item)}格式的文件！`)
        return false
      } else if (!isLt) {
        this.$message.error('上传文件大小不能超过 5MB!')
        return false
      } else {
        this.uploadLoading = true
        return true
      }
    },

    onRemoveHandler(file) {
      const { uploadFiles } = this.$refs.uploadRef
      uploadFiles.splice(
        uploadFiles.findIndex((item) => item.uid === file.uid),
        1
      )
      this.formData.file.splice(
        this.formData.file.findIndex(
          (item) => item.uid === file.uid && item.filename === file.name
        ),
        1
      )
      // 【注意】删除图片，校验图片字段
      this.$refs.submitRef &&
        this.$refs.submitRef.$refs.form &&
        this.$refs.submitRef.$refs.form.validateField('file')
    },

    // eslint-disable-next-line handle-callback-err
    onErrorHandler(err, file, fileList) {
      this.uploadLoading = false
      this.$message.error(`${file.name}文件上传失败，请重新上传！`)
    },

    // 文件上传成功
    onSuccessHandler(response, file) {
      this.uploadLoading = false
      console.log('response----', response)
      const fileList = response.data.fileUploadInfoList
        ? response.data.fileUploadInfoList.map((item) => {
            return {
              wjmc: item.filename,
              wjlj: item.path,
              wjgs: item.fileType,
              uid: file.uid
            }
          })
        : []
      this.formData.file.push(...fileList)
      this.$refs.submitRef &&
        this.$refs.submitRef.$refs.form &&
        this.$refs.submitRef.$refs.form.validateField('file')
    },

    // 预览图片
    handlePictureCardPreview(file) {
      const imageDom = document.getElementById('image' + file.uid)
      imageDom && imageDom.click()
    },

    handleSubmit() {
      this.$refs.submitRef.validate().then((valid) => {
        const { xm, file } = this.formData
        const { dwdm, yhdh } = this.rowData
        const params = {
          dwdm,
          yhdh,
          xm,
          path: 'addFace/',
          file: file.map((item) => {
            const { uid, ...fileInfo } = item
            return fileInfo
          })
        }
        addFace(params).then((res) => {
          this.$common.CheckCode(res, `${this.title}成功`, () => {
            this.handleClose()
            this.$emit('update')
          })
        })
      })
    },

    handleClose() {
      this.fileList = []
      this.rowData = {}
      for (const key in this.formData) {
        if (this.formData[key] && this.formData[key].constructor === Array) {
          this.formData[key] = []
        } else if (this.formData[key] && this.formData[key].constructor === Object) {
          this.formData[key] = {}
        } else {
          this.formData[key] = ''
        }
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
@import '@/styles/dialog-style.scss';
>>> .el-dialog__body {
  padding-bottom: 10px;
}
>>> .el-dialog .upload_demo + .el-form-item__error {
  top: 100% !important;
}
</style>

效果图展示