关于vue+element对ie9的兼容el-upload不支持在IE9上传

关于vue+element对ie9的兼容el-upload不支持在IE9上传

https://lian-yue.github.io/vue-upload-component/#/zh-cn/

解决方案 采用vue-upload-component

npm install vue-upload-component --save

<template>

  <div class="app-container">

    <el-row class="page-content">

      <el-col :span="24" style="margin:20px">

        <el-form label-width="200px" class="addform">

          <el-form-item label="附件">

            <file-upload

              class="el-button margin_left10 el-button--primary el-button--small"

              style="overflow:visible"

              :maximum="1"

              :multiple="false"

              　　ref="upload"

              　　v-model="files"

              　　post-action="url"

              　　@input-file="inputFile"

              　　@input-filter="inputFilter"

            >

              <span   style="color:#FFFFFF">选取文件</span>

            </file-upload>

            <el-button

              size="small"

              type="primary"

              v-show="!$refs.upload || !$refs.upload.active"

              @click.prevent="$refs.upload.active = true"

            >

              <span  style="color:#FFFFFF">开始上传</span>

            </el-button>

          </el-form-item>

          <el-form-item label="文件列表" class="fileList" v-show=" files.length>0">

            <ul class="el-upload-list el-upload-list--text">

              <li class="el-upload-list__item is-ready" v-for="(file,index) in files" :key="index">

                <span>{{file.name}}</span>

              </li>

            </ul>

          </el-form-item>

        </el-form>

      </el-col>

    </el-row>

  </div>

</template>

<script>

import { getFileId, deleteFileId } from "@/api/flca";

import "vue-upload-component/dist/vue-upload-component.part.css";

import FileUpload from "vue-upload-component";

export default {

  components: {

    FileUpload

  },

  data() {

    return {

      files: [],

    };

  },

  methods: {

    upLoad() {

         this.$refs.upload.active = true;

    },

    inputFilter(newFile, oldFile, prevent) {

      if (newFile && !oldFile) {

        const extension = newFile.name.substring(newFile.name.lastIndexOf(".") + 1);

        console.log(extension);

        if (extension =='pdf' ||extension =='PDF' ) {

        } else {

          this.$message({

            message: "上传文件只能是pdf格式文件!",

            type: "warning"

          });

          return prevent();

        }

      }

    },

    inputFile(newFile, oldFile) {

      if (newFile && oldFile) {

        // 更新文件

        // 开始上传

        if (newFile.active !== oldFile.active) {

           console.log("Start uploa3333333333333333d",newFile.size)

          console.log("Start upload", newFile.active, newFile);

          this.isXls = false;

        }

        // 上传进度

        if (newFile.progress !== oldFile.progress) {

          console.log("progress", newFile.progress, newFile);

        }

        // 上传错误

        if (newFile.error !== oldFile.error) {

          console.log("error", newFile.error, newFile);

          this.$message({ message: "上传失败!", type: "error" });

        }

        // 上传成功

        if (newFile.success !== oldFile.success) {

          console.log("success", newFile.success, newFile);

          this.$message({ message: "上传成功!", type: "success" });

        }

      }

    }

  }

};

</script>