最近用elment-ui做了一个项目,在ie10上传图片的时候,第一次没问题,然后上传同样的图片,就会报错XMLHttpRequest: 网络错误 0x2efd, 由于出现错误 00002efd 而导致此项操作无法完成。

简单说下问题分析,很多说是keepAlive机制造成的,于是关闭和后端联调,关闭keep-Alive,并没有卵用.

这个问题本质上是vue中onchange上传相同图片的问题,上传相同图片不会onchange,一般的解决办法就是讲input的value置空。

但是ie10及以下无法置空。

下面直接说我的解决办法吧。

  <el-upload
              ref="upload"
              class="pic-uploader"
              :action="action"
              :show-file-list="false"
              accept="image/jpg, image/jpeg, image/png"
              :before-upload="onBeforeUpload"
              :on-success="handleSucess"
              :on-error="handleError"
            >
              <i v-if="!imageUrl" class="el-icon-plus pic-uploader-icon"></i>
            </el-upload>

在handleSucess回调里判断ie10

    //上传图片成功回调
    handleSucess() {
      let isIE10 = false;
      if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
        // 判断ie10以及以下
        isIE10 = true;
      } else {
        isIE10 = false;
      }
      let ele = this.$refs.upload.$el.getElementsByTagName("input")[0];
      if (isIE10) {
        let form = document.createElement("form");
        let beforInput = ele.nextSibling;
        let parentInput = ele.parentNode;
        form.appendChild(ele);
        form.reset();
        parentInput.insertBefore(ele, beforInput);
      } else {
        ele.value = null;
      }
    },

其实总的来说就是ie没办法用value=null清理,只能建立父元素form进行重置。

 

Logo

前往低代码交流专区

更多推荐