关于vue项目在ie9上的文件上传兼容

769 阅读2分钟
最近在开发一款项目,项目需求上传xlsx文件,项目中使用的架子是element-ui这个,在chrome上面开发一切正常,然而到ie上面问题来了,在ie9上面竟然功能不能用了,然后尝试使用FormData这个属性来原生上传,仍旧不行(ie10+可以),查找资料发现ie9一下是没有这个的,再然后就是试用fileReader这个,仍旧不行;接着查找资料发现ie的ActiveXObject这个属性,调用是仍旧不行,这个应该是服务类被禁掉了;后来找到一款   webuploader这个的插件,使用后发现ie9仍旧不能实现文件上传;

最后网上查找资料发现file-upload这个插件,发现是可以的,以下是demo代码

<template>  <div class="uploadWrap" :style="styles">    <file-upload      class="el-button el-button--deal el-button--small el-button--upload"      style="overflow:visible"      :maximum="1"      :multiple="false"      :request-options="reqopts"      ref="upload"      v-model="files"      name="filename"      :post-action="url"      @input-file="inputFile"      @input-filter="inputFilter"    >{{title}}</file-upload>  </div></template><script>import FileUpload from "vue-upload-component";export default {  name: "upload",  components: {    FileUpload  },  props: {    title: String,    url: String,    styles: String,    callbackFn: Function  },  data() {    return {      file: "",      files: [],      reqopts: {        formData: {          tokens: ""        },        dataType: "json",        headers: {          contentType: "text/plain"        },        contentType: "text/html",        responseType: "json",        withCredentials: false      }    };  },  methods: {    upLoad() {      this.$refs.upload.active = true;    },    inputFilter(newFile, oldFile, prevent) {      if (newFile && !oldFile) {        const extension = newFile.name.substring(          newFile.name.lastIndexOf(".") + 1        );        const extensionName = extension.toLowerCase();        // .xls, .xlsx        if (extensionName != "xls" && extensionName != "xlsx") {          this.$message({            message: "上传文件只能是xls或者xlsx格式文件!",            type: "warning"          });          return prevent();        }      }    },    inputFile(newFile, oldFile) {      // console.log(newFile,oldFile,"??????????????");      if (newFile && oldFile) {        // 更新文件        // // 开始上传        if (newFile.active !== oldFile.active) {          this.isXls = false;        }        // // 上传进度        // if (newFile.progress !== oldFile.progress) {        //  console.log("progress", newFile.progress, newFile);        // }        // 上传错误        // if (newFile.error !== oldFile.error) {        //  this.$message({ message: "上传失败!", type: "error" });        // }        if(!newFile.success&&newFile.error === oldFile.error&&newFile.error!==""){          console.log(newFile,"????????????>>>>>");          const {response={}} = newFile;          this.$message({ message: response.message||"上传失败!", type: "error" });        }        // 上传成功        // if (newFile.success !== oldFile.success) {        //  this.$message({ message: "上传成功!", type: "success" });        // }        if (newFile.success) {          this.callbackFn&&this.callbackFn();  //回调函数          let {response} = newFile;           response = JSON.parse(response.replace(/<pre>/ig,"").replace(/<\/pre>/ig,""));          this.$message({ message: response.msg||"数据导入成功", type: "success" });        }      }      this.$refs.upload.active = true;    }  }};</script><style lang="less" scoped>.uploadWrap {  display: inline-block;}.el-upload-list {  display: none !important;}</style>

最后,也是最重要的,跟后端调试将返回的结果用json字符串给到,否则会在ie9中  上传成功 但是ie提示下载成功的返回json文件
最后上资料:

www.npmjs.com/package/vue…