zoukankan      html  css  js  c++  java
  • el-upload 上传携带参数

    1、template:

    <el-upload
      class="upload-file-demo"
      action="上传的url"
      ref="uploadComp"
      :auto-upload="false" //禁止自动上传
      :show-file-list='true' //显示上传文件名
      :file-list="certificates2" //回显文件
      :before-upload="beforeUpload" //文件上传前
      :on-change="handlePictureCardPreview2" //文件改变的时候
      :on-success="handleAvatarSuccess2" //文件上传成功回调
      :on-exceed="handleExceed2" //文件限制上传
      :on-remove="handleRemove2" //文件删除
      :limit="1" //限制个数
      :disabled="loading"
      :data="uploadData" //上传携带的参数
      accept=".xls,.xlsx,.png,.jpe,.jpeg"
    >
      <el-button :loading="loading" class="upload_btn" size="small" type="primary">上传明细</el-button>
    </el-upload>

    2、script:

    // 文件上传 - 上传前
    beforeUpload(file, fileList) {
        this.uploadData = { tradeOrder: this.dataList.id }; //上传携带的参数名
        let promise = new Promise((resolve) => {
            this.$nextTick(function () {
                resolve(true);
            });
        });
        return promise;
    },
    // 文件上传 - 文件选中后上传
    handlePictureCardPreview2(file, fileList) {
        this.$refs.uploadComp.submit();
    },
    //文件上传 - 成功回调
    handleAvatarSuccess2(res, file, fileList) {
        // console.log(res);
    },
    // 文件上传 - 限制上传
    handleExceed2(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 文件上传 - 删除
    handleRemove2(file, fileList) {
        var that = this;
        fileList.forEach((item, index) => {
            that.certificate2.push(item.url);
        })
    },
  • 相关阅读:
    pl/sql可以封装代码的结构(过程,函数, 包)
    pl/sql 块结构
    Oracle 逻辑模型(数据库,用户的关系)
    Oracle 创建用户为什么要加C##
    CentOS8断电后无法正常启动
    Cannot open /var/log/sa/sa26: No such file or directory
    Centos6.6安装sysstat报错/etc/cron.d
    Oracle DBCA工具检测不到ASM磁盘组
    Redis安装
    Mysql模拟故障恢复案例过程
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/15210151.html
Copyright © 2011-2022 走看看