zoukankan      html  css  js  c++  java
  • element upload上传前对文件专门bs64上传

    <!-- 文件上传 -->
    <template>
        <section class="file-upload">
          <p class="title">提案信息</p>
          <el-upload
            class="upload-demo"
            ref="fileUpload"
            accept=".xls,.xlsx"
            :class="{'pointer-events' : fileShow}"
            :action="action"  
            :data="excelPath"
            :on-change="fileData"
            :on-success="fileSuccess"
            :show-file-list="fileShow"
            :limit="1"
            :file-list="fileList"
            :before-remove="beforeRemove"
            :disabled="disabled"
            :auto-upload="false"
            >
            <el-button :type=" disabled ? 'info' : 'primary'"  >导入发起提案</el-button>
    
          </el-upload>
    
    
    
        </section>
    </template>
    
    <script>
    
        export default {
            data() {
                return {
                    action: process.env.VUE_APP_BASE_API + process.env.VUE_APP_REQURL +"/fileImport/getFileInfo",
                    excelPath: {
                        "excelPath": ""
                    }
                };
            },
            computed:{
                fileShow : {
                  get : function () {
                      return this.fileList.length > 0 ? true : false
                  },
                  set : function (newValue) {
    
                  }
                },
                disabled : {
                    get : function () {
                        return this.$route.query.id  ? true : false
                    },
                    set : function (newValue) {
    
                    }
                },
            },
            props:{
                fileList: Array,Object,
            },
    
            methods: {
    
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${ file.name }?`).then(()=>{
                        this.$emit('dataInit')
                    });
                },
                fileSuccess (response, file, fileList) {
                    this.getData(response.data)
                    this.fileShow = true
                    this.disabled = true
                    this.$emit('addFile',{name: file.name, url: ''})
                },
    
                getData(val){
                    this.$emit('getData',val)
                },
                // 获取本地路径地址
                fileData(file){
                    let reader = new FileReader()
                    reader.readAsDataURL(file.raw);// 这里也可以直接写参数event.raw
                    reader.onload=()=>{
                        this.excelPath.excelPath = reader.result
                        this.$refs.fileUpload.submit();
    
                    }
                },
    
            }
        }
    </script>
    
    

      

  • 相关阅读:
    ES基本原理
    docker技术基础
    docker简介
    IaaS,PaaS和SaaS
    python的type和object
    django:一个RESTfull的接口从wsgi到函数的历程
    python的list内存分配算法
    10个我最喜欢问程序员的面试问题
    月薪三万的面试题
    深圳有趣网络笔试题面试题
  • 原文地址:https://www.cnblogs.com/hpx2020/p/11820579.html
Copyright © 2011-2022 走看看