el-upload单图上传，包含预览、删除、默认显示。

	<el-form-item label="一号位图：" prop="pgUrl1">
			 <el-upload
                action=""
                list-type="picture-card"
                :show-file-list="true"
                :on-remove="handleRemove""
                :file-list="gpfileList1"
                :on-preview="handlePictureCardPreview"
                :class="{hide: uploadHide}"
              >
                <i class="el-icon-plus">i>
              el-upload>
              <el-dialog
                :visible.sync="dialogVisible"
                title="预览"
                width="800"
                append-to-body
              >
                <img
                  :src="dialogImageUrl"
                  style="display: block; max-width: 100%; margin: 0 auto"
                />
              el-dialog>
    el-form-item>
    <div slot="footer" class="text-center">
        <el-button type="primary" @click="gpsubmitForm">确 定el-button>
        <el-button @click="gpcancel">取 消el-button>
      div>

 data() {
      return {
    	gpfileList1: [],
        uploadHide:false,
        dialogImageUrl: "",
        dialogVisible: false,  
      }
	}

 methods: {
 	handleGoodsPic(row) {
        this.reset()
        const gid = row.gId
        this.form.gId = gid
        this.gpopen = true
        this.gploading = false
        this.gptitle = '详情图'
        this.gpfileList1.push({
          name: "1",
          url: "http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
        }, {
          name: "2",
          url: "http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
        })
        this.uploadHide = true;
      },
 	//提交方法
	gpsubmitForm: function () {
        console.log(this.gpform.pgUrl1)
        let formData = new FormData()
        formData.append('avatarfile', this.gpform.pgUrl1)
        formData.append('gId', this.form.gId)
        imgupload(formData).then(response => {
          this.$modal.msgSuccess('操作成功')
          this.gpopen = false
        })
      },
      gpcancel() {
        this.gpopen = false
        this.reset()
      },
      //覆盖后的上传方法
      gprequestUpload1(file) {
        this.uploadHide = true;
        this.gpform.pgUrl1 = file;
      },
      //上传前的方法，用户判断尺寸、大小、类型
      gpbeforeUpload(file) {
       const isJPG =
          file.type === "image/jpg" ||
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/gif";
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isJPG) {
          this.$message.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        }
        if (!isLt2M) {
          this.$message.error("上传图片不能大于10M");
        }
        const isSize = new Promise(function (resolve, reject) {
          let width = 378;
          let height = 200;
          let _URL = window.URL || window.webkitURL;
          let image = new Image();
          image.onload = function () {
            let valid = image.width == width && image.height == height;
            valid ? resolve() : reject();
          };
          image.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message.error("上传头像图片尺寸不符合,只能是378*200");
            return Promise.reject();
          }
        );
        return isJPG && isLt2M && isSize;
      },
      //删除方法获取到的file是被删除的file
      handleRemove(file) {
        this.gpfileList1 = [];
        this.uploadHide = false;
      },
      // 预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      reset() {
          this.gpfileList1 = [],
      },
	}