关于文件上传 以及 图片视频回显的问题

<template>
  <div>
    <!-- 上传文件按钮 -->
    <el-empty description="  " :image-size="200">
      <el-button type="primary" @click="uploadFileAdd"
        >点击上传<i class="el-icon-upload el-icon--right"></i
      ></el-button>
    </el-empty>

    <!-- 上传文件按钮的弹窗 -->
    <el-dialog
      title="上传文件"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-form
        :model="dialogForm"
        :rule="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="文件类型(可选)" prop="name">
          <el-cascader
            ref="cascader"
            :options="classifyData"
            :show-all-levels="false"
            :props="props"
            clearable
            v-model="dialogForm.name"
            @change="cascaderChangeFn"
          ></el-cascader>
        </el-form-item>
        <!-- 测试的demo -->
        <el-form-item label="请选择上传的文件" prop="name">
          <el-upload
            :list-type="isImgOrVideo === 1 || 2 ?'picture':'text'"
            class="upload-demo"
            drag
            ref="upload"
            action
            :auto-upload="false"
            :show-file-list="true"
            :http-request="handleUpload"
            :on-change="handleChange"
            :limit="1"
            :before-upload="beforeUploadFn"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleUploadRemove"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
          <el-dialog title="文件预览"  width="80%" :visible.sync="imgDialogVisible" append-to-body>
            <img
              v-if="isImgOrVideo === 1"
              width="100%"
              :src="dialogImageUrl"
              alt
            />
            <video
              v-else-if="isImgOrVideo === 2"
              width="100%"
              :src="dialogImageUrl"
              controls="controls"
            />
            <span v-else>该格式文件不支持预览</span>
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileType: "", //文件类型
      dialogVisible: false,
      isShow: true,
      imgDialogVisible: false, //回显图片或者视频
      props: { checkStrictly: true, label: "name", value: "classifyId" },
      dialogForm: {
        name: "",
        describe: "",
        fileType: "",
      },
      rules: [],
      // 关于类型的一个变量，用来控制显示上传视频还是上传图片的
      data: [],
      classifyData: [],
      selectValue: "", //选择分类的值
      fileList: [],
      dialogImageUrl: "",
      proofImage: "",
      isImgOrVideo: "",
    };
  },
  created() {
    this.getAllClassify();
  },
  methods: {
    // 文件上传之前的限制
    beforeUploadFn(file) {
      console.log(90, file);
      const isSize = file.size / 1024 / 1024 < 20;
      console.log(92, isSize);
      if (!isSize) {
        this.$message.error("文件大小不能超过20M！");
        return false;
      }
    },
    // 手动上传
    handleUpload(file) {
      console.log(177, file);
      let formData = new FormData(); // 新建一个FormData()对象，这就相当于你新建了一个表单
      console.log(187, formData);
      formData.append("file", file.file); // 将文件保存到formData对象中
      console.log(111, this.selectValue);

      if (this.selectValue) {
        formData.append("classify_id", this.selectValue);
        console.log(111, this.selectValue);
      }
      console.log(188, formData.get("file"), formData.get("classify_id"));
      // 调用上传接口

    },
    // 点击上传文件的改变
    handleChange(file, fileList) {
      console.log(175, file, fileList);
      file.classify_id = this.selectValue;
      const a = file.raw.type.split("/")[0];
      if (a === "image") {
        this.isImgOrVideo = 1;
      } else if (a === "video") {
        this.isImgOrVideo = 2;
      } else {
        this.isImgOrVideo = 0;
      }
      this.getBase64(file.raw).then((res) => {
        const params = res.split(",");
        console.log(params, "params");
        if (params.length > 0) {
          this.proofImage = params[1];
        }
      });
    },

    // 选择类型的事件
    cascaderChangeFn(val) {
      console.log("触发了change事件哦");
      let list = this.$refs["cascader"].getCheckedNodes();

      // console.log(val[val.length - 1]);

      this.selectValue = val[val.length - 1];

      console.log(this.selectValue, 197, val);
    },
    // 上传图片确认框
    confirmFn() {
      // 按钮触发调用手动上传的方法
      this.$refs.upload.submit();
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    // 上传文件的事件
    uploadFileAdd() {
      this.dialogVisible = true;
    },
    handleUploadRemove(file, fileList) {
      this.proofImage = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgDialogVisible = true;
    },
    // 获取图片转base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  color: #606266;
  font-size: 24px;
}

.head_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head_btn {
  .tag {
    margin-left: 10px;
    cursor: pointer;
  }
}

.table_box {
  margin-top: 17px;

  .percentage {
    color: #409eff;
  }
}
.audio,
video {
  height: 300px;
}
</style>

效果图