elementUI el-upload上传组件实战使用

<!-- 导入---------------------------------------- -->
<el-upload
    :show-file-list="false" 
    :headers="headers"
    :action="actionUrl" 
    :before-upload="beforeUpload" 
    :on-success="uploadSuccess"
    :on-error="uploadError"
    :disabled="percent < 100"
    >
        <el-button 
            type="success" 
            icon="el-icon-upload" 
            :loading="percent < 100">
            {{ 100 > percent ? percent
                + "%" : "上传数据" }}
        </el-button>
</el-upload>
<!-- ---------------------------------------- -->
属性_________________________________________________________
// 上传----------------------------------------
headers: {
    token: localStorage.token, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
},
actionUrl: `${this.$d.API_ROOT_URL}/customer/importCustomerData`,
fmt: ["xls", "xlsx"],
dur: 100,
percent: 100,
// ----------------------------------------
方法_________________________________________________________
// 上传文件----------------------------------------------------------------
showFakeLoading() {
    this.interval && clearInterval(this.interval);
    this.percent = 0;
    this.interval = setInterval(() => {
        this.percent++;
        this.percent >= 99 && clearInterval(this.interval);
    }, this.dur);
},
hideFakeLoading() {
    this.interval && clearInterval(this.interval);
    this.percent = 100;
},
//文件上传之前
beforeUpload(file, id) {
    // 判断是不是特定的格式________________________
    let isFile = this.fmt.includes(file.name.toLocaleLowerCase().split(".").pop());
    const maxSize = 50; //限制大小
    const isAllowSize = file.size / 1024 / 1024 <= maxSize;
    isFile || this.$message.error("上传文件只能是" + this.fmt + "格式");
    isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
    let allowUpload = isFile && isAllowSize;
    allowUpload && this.showFakeLoading(); //虚假加载
    return allowUpload; //若返回false则停止上传
},
//上传成功
uploadSuccess(response, file, fileList) {
    this.hideFakeLoading();
    if (response.data && response.data.key) {
        // 下载失败原因的描述文件
        this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {
            s: (d) => {
                this.$g.downloadFile(d, `“${file.name}”上传失败原因`, '.xls');
                this.$message.error(`“${file.name}”上传失败，请查看失败原因`);
                this.initList(true);//可能上传导入文件部分成功了，所以也需要刷新列表
                console.log('上传失败', response, file, fileList);
            }
        });
    } else if (response.success) {
        // 上传成功了
        this.$message.success(`“${file.name}”导入成功`);
        this.initList(true);//刷新列表
        console.log('上传成功', response, file, fileList);
    } else {
        // 其他失败原因
        this.$message.error(response.msg);
        console.log('上传失败', response, file, fileList);
    }
},
//上传失败
uploadError(err, file, fileList) {
    this.hideFakeLoading();
    this.$message.error("上传失败");
    console.log('上传失败', err, file, fileList);
},
// ----------------------------------------
样式_________________________________________________________
// 上传按钮禁用状态----------------------------------------
>>>.el-upload {
    cursor: not-allowed;
}