關於vue+element對ie9的兼容el-upload不支持在IE9上傳

關於vue+element對ie9的兼容el-upload不支持在IE9上傳css

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

 解決方案 採用vue-upload-componentgit



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>
相關文章
相關標籤/搜索