一、Plupload组件的介绍，见git文档
二、限制所要上传文件的类型
1、组件本身的类型限制接口
filters: {
mime_types: [
// 只允许上传图片和zip文件
{ title: 'Image files', extensions: 'jpg,gif,png' },
{ title: 'Zip files', extensions: 'zip' }
],
max_file_size: '400kb', // 最大只能上传400kb的文件
prevent_duplicates: true // 不允许选取重复文件
}
或者
filters: {
mime_types: [{ extensions: 'png,jpg,doc,zip' }],
max_file_size: '400kb', // 最大只能上传400kb的文件
prevent_duplicates: true // 不允许选取重复文件
}
出现的问题
在可选文件框的自定义文件类型中，会多出几个不在我的类型范围内的类型。这也就意味着，在拉起的上传框中，会显示不在限定范围内的类型文件（主要问题集中在图片类型上）。
WOA20210611-163245.png
2、Plupload上传文件原理
通过查看dom节点发现，Plupload使用的是input上传文件方式，定位到问题的根本是，input限制文件类型的问题。
3、解决思路（以下只讨论图片类型）
input通过配置accept，可以在拉起的上传框中只显示accept限定的类型文件。
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
会发现虽然限制了gif和jpeg，但其他的图片文件类型依旧会出现在，上传框的可选列表中。
把accept的限定范围进一步缩小，发现问题解决了。
<input type="file" name="pic" id="pic" accept=".gif, .jpeg" />
4、改写组件限制文件类型部分
有了思路以后，妄想这样修改
filters: {
mime_types: [{ extensions: '.png,.jpg' }],
max_file_size: '400kb', // 最大只能上传400kb的文件
prevent_duplicates: true // 不允许选取重复文件
}
但发现组件并不能支持这样配置，只能去更改input本身的accept属性值
#首先获取到对应的input节点
let loaderEleInput = loaderEle.querySelector('input[type="file"]');
#然后改变accept的配置
loaderEleInput.setAttribute('accept', '.png,.jpg');
三、缺陷
因为在选择文件框中，你依旧可以选择 所有文件( * . * )这个选项。前端只能在一定程度上提升用户体验，最终的类型限制还是要后端进行。
