<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自带文件选择框确定 就可以获取到