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>

  

posted @ 2019-11-08 15:30  惠鹏曦  阅读(210)  评论(0编辑  收藏  举报