• 关于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>
  • 相关阅读:
    【AS3代码】类的分包
    语句include和require的区别是什么?
    php创建多级目录的函数
    【AS3代码】打砖块
    【AS3代码】弧度的转换
    【AS3代码】是男人就坚持30秒
    每天问女儿的四个问题
    PowerDesigner16生成SQL2005列注释
    做分析师=盖房子【转】
    用gephi自动分析网站链接方式
  • 原文地址:https://www.cnblogs.com/yuwen1995/p/11989913.html
Copyright © 2020-2023  润新知