原生js实现上传文件模块

老版本写法

 <!-- 文件上传  -->
    <form
      id='uploadForm'
      method='POST'
      style="display:none;"
      enctype="multipart/form-data"
      action='/api/v1/monitor/authentication-setting/upload'
    >
      <input
        type='file'
        name='upload'
        id='uploadInput'
        accept=".ipa"
        :disabled="isEdit"
      />
    </form>

    uploadFile() {
      let input = document.getElementById("uploadInput");
      input.click();
      const _self = this;
      input.onchange = async function () {
        let formData = new FormData();
        const file = this.files[0];
        if (file) {
          formData.append("upload", file);
          setLoading(_self.$refs.createDialog.$el.childNodes[0]);
          const fileRes = await uploadFile(formData);
          closeLoading(_self.$refs.createDialog.$el.childNodes[0]);
          _self.uploadFileObj = fileRes.data;
          _self.filePath = fileRes.data.filePath;
          _self.getAppItem();
        }
      };
    },

存在上传后，点击取消上传，再次重新上传 ，监听不到文件上传的问题，二次上传无效

修改成在 uploadFile 方法里创建DOM 设置input的属性，然后执行完后，remove调input DOM结构，来实现一个文件上传模块

   <div  @click='uploadFile' > </div>

   uploadFile() {
      let input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("name", "upload");
      input.setAttribute("accept", ".ipa");
      const _self = this;
      input.onchange = async function () {
        let formData = new FormData();
        const file = this.files[0];
        if (file) {
          formData.append("upload", file);
          setLoading(_self.$refs.createDialog.$el.childNodes[0]);
          const fileRes = await uploadFile(formData);
          closeLoading(_self.$refs.createDialog.$el.childNodes[0]);
          _self.uploadFileObj = fileRes.data;
          _self.filePath = fileRes.data.filePath;
          _self.getAppItem();
          input.remove();
        }
      };
      input.click();
    },