el-upload上传基本使用方法整理 elementUI

本文介绍: 1、el–upload 本地上传获取本地文件数据（无需其他按钮触发）2、el–upload确认按钮触发上传3、el–upload 样式调整

一、本地 上传获取本地 文件 数据（无需其他按钮触发）

&lt;template&gt;
    &lt;el-upload 
        ref="upload" 
        action="alert"  
        :file-list="uploadFiles"
        :on-progress="importSubmit" 
        :limit='1' 
        :show-file-list="false"&gt;
             <el-button type="primary" plain &gt;导入</el-button&gt;
    </el-upload&gt;
</template&gt;
<script&gt;
export default {
    data() {
        return {
            uploadFiles: [],
        }
    },
    methods: {
        importSubmit(e,file,fileList) {
            // 解析上传的文件
            // let file = this.uploadFiles[0]
            let reader = new FileReader()
            // abort none 中断读取
            // readAsBinaryString file 将文件读取为二进制码，通常我们将它传送到后端，后端可以通过这段字符串存储文件
            // readAsDataURL file 将文件读取为 DataURL，一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
            // readAsText file, [encoding] 将文件读取为文本，读取的结果即是这个文本文件中的内容
            reader.readAsText(file.raw)
            // onabort 中断时触发
            // onerror 出错时触发
            // onload 文件读取成功完成时触发
            // onloadend 读取完成触发，无论成功或失败
            // onloadstart 读取开始时触发
            // onprogress 读取中
            reader.onload = (e) => {
                // 读取文件内容
                const fileString = e.target.result
                // 接下来可对文件内容进行处理
            }
        },
    }
}
</script>

on-progress:文件上传时的钩子,function(event, file, fileList)

使用该方法可以在选择上传文件，点击【打开】后，立即触发，无需其他按钮触发上传

二、确认按钮触发上传

<template>
    <el-upload 
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success"                                       
                         @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
</template>
<script>
export default {
    data() {
        return {
            fileList: [],
        }
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
        submitUpload(e,file,fileList) {
           this.$refs.upload.submit();//将文件上传到服务器
        },
    }
}
</script>

action ：必选参数，上传的地址（为后端上传接口地址）

this.$refs.upload.sub mit() 调用后端的上传接口地址，点击按钮触发

三、样式调整

<el-upload 
    class="upload-demo" 
    :limit="1" 
    ref="upload" 
    action="" 
    :file-list="fileList" 
    :show-file-list="false"
    :on-progress="submitUpload">
        <el-tooltip class="item" effect="dark" content="导入" placement="top">
          <el-button style="font-size: 20px" type="text" icon="el-icon-upload2"         @click="showUpload"></el-button>
        </el-tooltip>
</el-upload>

出现了独占一行的情况

解决办法：1、css样式调整

2、el-upload与按钮分开放置，el-upload可随意放置位置，按钮showUpload方法控制el-upload的div显隐

<template>
    <el-tooltip 
        class="item" 
        effect="dark" 
        content="导入"
        placement="top">
            <el-button style="font-size: 20px" type="text" icon="el-icon-upload2"
                        @click="showUpload">
            </el-button>
    </el-tooltip>
    <el-upload 
        class="upload-demo" 
        :limit="1" 
        ref="upload" 
        action="" 
        :file-list="fileList" 
        :show-file-list="false"
        :on-progress="submitUpload">
    </el-upload>
</template>
<script>
export default {
    data() {
        return {
            fileList: [],
        }
    },
    methods: {
        showUpload() {
            this.$refs["upload"].$refs["upload-inner"].handleClick();//打开el-upload
        },
    }
}    
</script>