前段时间碰到一个脑瓜贼疼的问题,后台管理有个需求,需要一次性多选文件,且选择后马上上传文件.用的是element-ui
百度找不到,element不提供选择数量属性,网上大部分提供的方案都是选择后手动插入FrameData 表单再手动提交,有点麻烦啊
也尝试了数十种变量判断算法,实在不行,再程序员不服气毅力趋势下,花了好长时间N天的摸爬滚打,跟了数十遍element 源码,
分析了input 对象的所有属性,终于让俺获取到了上传数量
先上代码后分析:
<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)
}
}
},
必须是放在 handChange里面获取,就能获取到了
1.先说说原理
文件上传本质上是通过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);
},
从上面2端代码可以看出,element 也是这样获取文件数量的,知道了这个真相就好办了,
只要找到存放文件的input不就好了吗,找了很久 element upload 其实是有2个组件, 外部index.vue组件创建的upload子组件,所以不比较不好找,只能从f12 里面一个个去跟踪
最终发现 在elemet-upload的Dom下面有多个 上传input 真实的是第0个 ,且只能在onchange 事件的时候获取到.
希望能帮助到大家,碰到问题不要怕,就是肝,程序员就是想尽办法解决问题的.碰到问题花时间看基础,一定会有办法的. 加油!!!!!