使用Plupload上传文件之限制文件类型

一、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限定的类型文件。

会发现虽然限制了gif和jpeg，但其他的图片文件类型依旧会出现在，上传框的可选列表中。
把accept的限定范围进一步缩小，发现问题解决了。

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');

三、缺陷

因为在选择文件框中，你依旧可以选择 所有文件( * . * )这个选项。前端只能在一定程度上提升用户体验，最终的类型限制还是要后端进行。