场景

先说一下适用场景吧。

单据只能上传一张图片，图片上传完成后，在当前界面显示，并隐藏掉上传按钮。再次打开单据时，可以查看已经上传的图片，同时可以对已经上传的图片进行修改，修改的上传也是只能上传一张图片。

前端代码

<template>
  <!-- 添加或修改医疗机构登记对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="60%" height="60%" :close-on-click-modal="false"
             :close-on-press-escape="false" show-close append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12" v-if="form.vehicleNumber !== 0">
          <el-form-item label="车辆编号" prop="vehicleNumber">
            <el-input v-model="form.vehicleNumber" placeholder="请输入车辆编号" maxlength="32"
                      show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆型号" prop="vehicleModel">
            <el-input v-model="form.vehicleModel" placeholder="请输入医疗机构车辆型号" maxlength="128"
                      show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌" prop="licence">
            <el-input v-model="form.licence" placeholder="请输入车牌" maxlength="10" @blur="licenceUpper"
                      show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购置日期" prop="acquisitionDate">
            <el-date-picker format="yyyy-MM-dd" style="width:100%" value-format="yyyy-MM-dd" clearable
                            v-model="form.acquisitionDate" placeholder="请选择购置日期" show-word-limit></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶员" prop="driver">
            <el-input v-model="form.driver" placeholder="请输入驾驶员" maxlength="32"
                      show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" maxlength="512"
                      show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆图片">
            <el-upload action="#" list-type="picture-card" ref="upload"
                       :auto-upload="true" :multiple="false" accept="image/png, image/jpeg"
                       :before-upload="onBeforeUpload"
                       :http-request="uploadFile"
                       :on-success="onSuccess"
                       :on-change="onChange"
                       :class="{hide:hideUpload}"
                       :file-list="fileList">
              <i slot="default" class="el-icon-plus" v-if="!disabled"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
          <i class="el-icon-download"></i>
        </span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>

<script>
import { addVehicle, updateVehicle, getVehicle } from '@/api/servicePlatform/basicData/vehicle'
import { fileUpload } from '@/api/public/attachment'

export default {
  name: 'detail',
  props: ['open', 'title', 'selectedVehicle'],
  data: function() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        vehicleNumber: [
          { required: true, message: '请输入车辆编号', trigger: 'blur' }
        ],
        vehicleModel: [
          { required: true, message: '请输入医疗机构车辆型号', trigger: 'blur' }
        ],
        licence: [
          { required: true, message: '请输入车牌', trigger: 'blur' }
        ],
        acquisitionDate: [
          { required: true, message: '请选择购置日期', trigger: 'blur' }
        ],
        driver: [
          { required: true, message: '请输入驾驶员', trigger: 'blur' }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      hideUpload: false,
      limitCount: 1,
      selectedCount: 0
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.vehicleId != undefined) {
            updateVehicle(this.form).then(response => {
              this.msgSuccess('修改成功')
              this.$emit('getList')
            })
          } else {
            addVehicle(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.$emit('getList')
            })
          }
        }
      })
    },
    //取消
    cancel: function() {
      this.$emit('cancel')
    },
    licenceUpper: function(val) {
      if (this.form.licence !== undefined) {
        this.form.licence = this.form.licence.toUpperCase()
      }
    },
    //删除
    handleRemove(file) {
      this.selectedCount--
      this.hideUpload = file.length >= this.limitCount
      this.$refs.upload.clearFiles()
    },
    //预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //下载
    handleDownload(file) {
      const a = document.createElement('a')
      const event = new MouseEvent('click')
      a.download = file.name
      a.href = file.url
      a.dispatchEvent(event)
      console.log(file)
    },
    //上传前校验
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!')
      }
      return isIMAGE && isLt1M
    },
    onChange: function(file) {
      debugger
      this.fileList = []
      this.fileList.push(file)
      this.selectedCount++
      this.hideUpload = this.selectedCount >= this.limitCount
    },
    handleUpload: function() {
      this.$refs.upload.submit()
    },
    //上传附件
    uploadFile(param) {
      fileUpload(param).then(res => {
        debugger
        if (res.code === 200) {
          this.form.photo = res.attachmentId
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
        }
      }).catch((error) => {
        this.$message({
          showClose: true,
          message: error,
          type: 'error'
        })
      })
    },
    beforeUpload(file) {

    },
    //上传成功
    onSuccess: function(response, file, fileList) {

    }
  },
  created() {
    if (this.selectedVehicle !== undefined && this.selectedVehicle !== null && this.selectedVehicle.vehicleId !== undefined) {
      getVehicle(this.selectedVehicle.vehicleId).then(response => {
        this.form = response.data
        this.dialogImageUrl = response.data.url
        let obj = new Object()
        obj.url = response.data.url
        this.fileList.push(obj)
      })
    }
  }
}
</script>

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>