template部分:

  <!-- 修改弹窗 -->
  <el-dialog :title="dialogTxt" @close="closeDialog" :visible.sync="alertBox">
    <el-form ref="addForm" :rules="rules" :model="addForm" size="medium" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="知识标题：" prop="knowledgeTitle">
            <el-input v-model="addForm.knowledgeTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内容：" prop="knowledgeContent">
            <el-input v-model="addForm.knowledgeContent"></el-input>
          </el-form-item>
        </el-col>

        <!-- 图片上传 -->
        <el-col :span="12">
          <el-form-item label="图片选择：">
            <el-upload
              action="#"
              ref="uploadimg"
              :limit="1"
              :auto-upload="false"
              :on-change="imageChange"
              :show-file-list="true"
              :http-request="httpRequest"
              :file-list="fileList"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :before-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态：" prop="knowledgeStatus">
            <el-select v-model="addForm.knowledgeStatus" placeholder="请选择" @change="selectStatus">
              <el-option label="可用" value="0"></el-option>
              <el-option label="已禁止" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="submitBtn">
          <el-button type="primary" icon="el-icon-check" @click="uploadSucess('addForm')">提交</el-button>
          <el-button type="danger" icon="el-icon-circle-close" @click="cancleUpload">取消</el-button>
        </div>
      </el-row>
    </el-form>
  </el-dialog>

methods部分:

    //关闭弹框清空校验信息
    closeDialog() {
      this.$refs.expertForm.clearValidate();
    },
    //选择图片后做图片格式限制（手动上传图片时，before-upload钩子无效，使用此方法替代）
    imageChange(file, fileList) {
      const isImage =
        file.raw.type == "image/png" ||
        file.raw.type == "image/jpg" ||
        file.raw.type == "image/jpeg";
      const isLt5M = file.size < 1024 * 1024 * 5;
      if (!isImage) {
        this.$message.error("上传只能是png,jpg,jpeg格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }

      if (isImage && isLt5M) {
        this.uploadFile = file.raw || null;
      } else {
        fileList.splice(-1, 1);
      }
    },

    //超出限制个数钩子
    handleExceed(files) {
      this.$message.warning("当前限制选择1个文件");
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log(file);
      fileList.splice(0, 1);
      this.fileList = fileList;
      this.uploadFile = null;
      console.log("3333333", this.fileList);
      this.changeUrl = file.url;
    },

    httpRequest(params) {
      //解决删除文件时报错
      const prom = new Promise((resolve, reject) => {});
      prom.abort = () => {};
      return prom;
    },
    selectStatus() {
      this.ifStatus = true;
    },
    //  上传提交
    uploadSucess(formName) {
      this.$refs.uploadimg.submit();
      let formData = new FormData();
      if (this.addText == "add") {
        if (!this.uploadFile) {
          this.$message.error("图片不能为空！");
        } else {
          formData.append("file", this.uploadFile);
          formData.append("title", this.addForm.knowledgeTitle);
          formData.append("content", this.addForm.knowledgeContent);
          formData.append("status", this.addForm.knowledgeStatus);
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$store
                .dispatch("baseSet/uploadSucess", formData)
                .then(() => {
                  this.knowledgeManager(this.pageNum);
                  this.alertBox = false;
                  this.$refs.uploadimg.clearFiles();
                  this.ifStatus = false;
                });
            }
          });
        }
      } else {
        if (!this.uploadFile) {
          this.$message.error("图片不能为空！");
        } else {
          if (this.uploadFile) {
            formData.append("file", this.uploadFile);
          }

          formData.append("title", this.addForm.knowledgeTitle);
          formData.append("content", this.addForm.knowledgeContent);
          formData.append("status", this.addForm.knowledgeStatus);
          formData.append("id", this.changeId);
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$store
                .dispatch("baseSet/changeKnowledge", formData)
                .then(() => {
                  this.knowledgeManager(this.pageNum);
                  this.alertBox = false;
                  this.$refs.uploadimg.clearFiles();
                  this.ifStatus = false;
                });
            }
          });
        }
      }
    },
    cancleUpload() {
      this.alertBox = false;
      this.fileList = [];
    },