获取element-ui的dialog中元素为null的问题

在打开弹窗的时候操作DOM，发现获取DOM为null

问题

如上图所示，在打开弹窗的时候，需要给按钮添加监听事件，上传文件
代码如下

 getFileMD5() {
      const el = document.getElementById("upload-file");
      const bmf = new BMF();
      el.addEventListener(
        "change",
        e => {
          const file = e.target.files[0];
          this.fileInfo.name = file.name;
          this.fileInfo.size = file.size;
          bmf.md5(
            file,
            (err, md5) => {
              this.fileInfo.MD5 = md5;
              console.log(this.fileInfo);
              //上传
              this.postFileHttp(this.fileInfo)
                .then(() => {
                  this.$refs.upload.submit();
                })
                .catch(err => {
                  alert("上传失败" + err.message);
                });
            },
            () => {}
          );
        },
        false
      );
    },

一开始是把控制dialog的变量isFirmwareAddShow放到watch中，只要isFirmwareAddShow为true的时候，执行getFileMD5函数，结果第一次获取upload-file为空

原因

在isFirmwareAddShow为true的时候，DOM并没有渲染完成

解决方法

在el-dialog中增加@opened="getFileMD5"事件
官网说明：

事件名称	说明	回调参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调	—

<el-dialog
      title="添加固件"
      :visible.sync="isFirmwareAddShow"
      width="30%"
      :before-close="closeForm"
      @opened="getFileMD5"
    >
    ...
 </el-dialog>