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

2019/12/05 15:59
阅读数 936

关于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>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部