最近在开发一款项目,项目需求上传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…