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>
    
    

      

  • 相关阅读:
    JS创建类的方法--简单易懂有实例
    CommonJS, AMD, CMD是什么及区别--简单易懂有实例
    JS回调函数--简单易懂有实例
    单链表应用(2)--使用快慢指针,如何判断是否有环,环在哪个节点
    单链表应用(1)--使用快慢指针,找链表中间值
    自定义线性结构-有序Map
    C++中final和override
    双向链表翻转
    检查“()”是否匹配并返回深度
    是否存在K
  • 原文地址:https://www.cnblogs.com/hpx2020/p/11820579.html
Copyright © 2011-2022 走看看