携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

最近一个后台管理需要一个根据excel批量导入数据的功能，恰巧ElementUI中有上传组件，并且我认为其封装得虽不能说十分好用，但对于我这种菜鸟蛋子也算是雪中送炭，毕竟自己写一个足够便捷且美观的上传文件组件还是比较困难的。

因为博主只使用了拖拽上传组件，因此该文章只对拖拽上传组件进行总结，不过其实上传组件都差不多？

官方案例

首先我们来看一下官方给出的案例

<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

em标签用于表示强调，解析后为一段斜体的文字，但是官方案例中配置的样式将其默认样式替换成了统一的官方样式

不难看出上传组件的标签为el-upload，因此ElementUI官方文档中所有的配置项应都放置在该组件中。

drag属性用来表示该组件可以拖拽上传。 action属性用来表示请求url，当配置了http-request后许多上传行为包括该属性都将被覆盖。 multiple属性表示该组件可以多选文件上传，应注意这个属性没有控制上传文件总数，也就是上传成功后下方的任务列表数，而是单次的上传量，与原生input中的multiple属性相同。 如果想限制上传总数，应配置limit属性。

原生input还有个属性叫webkitdirectory，用来表示可以选择文件夹上传，仅作补充

总体来看这是一个封装度很高的组件，我在使用时配置了http-request以更加直观地判断请求成功后应该使用的处理函数

自己的

（原谅我的语文功底只能写出这样的标题）

<el-upload class="upload-demo" ref="upload" drag action="#" :limit="1" :with-credentials="true"
    accept=".xls,.xlsx" :file-list="fileList" :http-request="toUpload">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">在这里上传想要批量导入的名单，仅支持excel文件</div>
</el-upload>

methods: {
    uploadSuccess(response, val) {
        //省略
        this.$refs.upload.clearFiles()
    },
    uploadError(err) {
        //省略
        this.$refs.upload.clearFiles()
    },
    toUpload(val) {
                let fd = new FormData()
        fd.append('file', val.file)
        axios({
            //省略
        });
    }
},

当使用了http-request后，所有默认的上传将被该属性配置的函数所覆盖。因此如果你希望上传后（不论失败与否）将上传列表中清空，则需要调用clearFiles()清空列表，该操作需要拿到el-upload组件，因此我们使用ref取到，再调用该组件上的清空列表的函数，该函数在ElementUI官网中已有更详细的描述

应注意accept可以限制文件上传类型，我这里配置的是.xls,.xlsx，意为仅能上传excel文件，你可以自己根据需求改变

ElementUI上传组件Upload使用总结

官方案例

自己的