element-ui Upload多文件一次上传,获取选择的文件的数量

 <el-upload
            ref="fileUpload"
            v-loading="fileloading"
            class="upload-file"
            :action="uploadUrl"
            :multiple="true"
            :limit="9"
            :on-preview="handleFilePreview"
            :on-remove="handleFileRemove"
            :on-error="handleError"
            :on-exceed="handExceed"
            :on-change="handFileChange"
            :http-request="uploadFileFile"
            :before-upload="beforeFileAvatarUpload"
            :file-list="data.wArticleAnnexes_temp"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">上传任意文件</div>
          </el-upload>
 
  handFileChange(files, fileList) {
      var upload_img = document.getElementsByClassName('upload-file')
      if (upload_img && upload_img.length > 0) {
        var upload = upload_img[0].getElementsByTagName('input')
        if (upload && upload.length > 0 && upload[0].files && upload[0].files.length > 0) {
          this.uploadNum = upload[0].files.length
          console.log(this.uploadNum)
        }
      }
    },

文件上传本质上是通过input 标签上传,不管是element 或者其他第三方,用的intput 标签

input 提供了on-change 事件,在文件选择完成后就能获取到获取的文件数量,和文件信息,element-ui 的upload 其实用的也是input 从下面这段element 源码中就能看出,上element upload源码

render(h) {
    let {
      handleClick,
      drag,
      name,
      handleChange,
      multiple,
      accept,
      listType,
      uploadFiles,
      disabled,
      handleKeydown
    } = this;
    const data = {
      class: {
        'el-upload': true
      },
      on: {
        click: handleClick,
        keydown: handleKeydown
      }
    };
    data.class[`el-upload--${listType}`] = true;
    return (
      <div {...data} tabindex="0" >
        {
          drag
            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
            : this.$slots.default
        }
        <input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>
      </div>
    );
  }

  handleChange(ev) {
      const files = ev.target.files;

      if (!files) return;
      this.uploadFiles(files);
    },

只要找到存放文件的input,就可获取文件数量,而且是在window自带文件选择框确定 就可以获取到

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值