<el-form-item label="一号位图：" prop="pgUrl1">
			 <el-upload
                action=""<!--指定上传地址，我要自己上传，这样可以防止服务器上产生垃圾数据-->
                :http-request="gprequestUpload1"<!--覆盖后的上传方法-->
                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 = [],
      },
	}

<style>
 .hide .el-upload--picture-card {
    display: none;
  }
  //去除动画
  .el-list-enter-active,
  .el-list-leave-active {
    transition: all 0s;
  }
</style>