element-ui实现upload拖拽上传前端部分）

（一）先上页面：

需求说明 ：

（1) 可点击上传或者拖拽上传
  (2) 只能上传tar格式并且不能超过10Mb

（3）上传文件的列表会覆盖上一个上传的（即文件列表只能有一个文件）

（二）页面代码：

               <el-upload
                    class="upload-demo"
                    drag
                    :action="https://jsonplaceholder.typicode.com/posts/"
                    :before-upload="beforeUpload"
                    :on-success="upSuccess"
                    :on-error="upError"
                    :on-remove="upRemve"
                    :on-change="upChange"
                    enctype="multipart/form-data"
                    :file-list="fileList"
                    :multiple="false"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        只能上传tar格式，且不超过10MB
                    </div>
                </el-upload>

注：action为上传文件的接口，:file-list已上传的文件列表，:multiple指是否支持多选文件上传

（三）上传的钩子函数

        //上传之前
        beforeUpload(file) {
          const fileSuffix = file.name.substring(
             file.name.lastIndexOf('.') + 1
          );
          const whiteList = ['tar'];
          if (whiteList.indexOf(fileSuffix) === -1) {
             this.$message({
                type: 'error',
                message: '上传文件只能是 tar 格式',
                showClose: true,
                offset: 80,
              });
              this.fileList = [];
              return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message({
                    type: 'error',
                    message: '上传文件不能超过10MB',
                    showClose: true,
                    offset: 80,
                });
                return false;
            }
        },
        // 上传成功
        upSuccess(res) {
            this.$message({
                type: 'success',
                message: '上传成功',
                showClose: true,
                offset: 80,
            })
        },
        // 上传失败
        upError() {
            this.$message({
                type: 'error',
                message: '上传失败',
                showClose: true,
                offset: 80,
            });
        },
       //上传的文件改变时（覆盖原来的文件）
        upChange(file, fileList) {
            if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]];
            }
        },
        // 移除列表
        upRemve(file) {
            console.log(file)console.log(file)
        }

限制文件的格式还可以在html页面中加入 :accept="["tar","txt"]"

大功告成！！！