最近在项目中，接到了一个新的需求，多文件上传，只能上传csv,xlx,xlsx三种文件类型，文件个数最大为50个，文件大小最大为200M，且文件名最大为50个字符，这个需求看着简单，做完以后，感觉这里面对数组的操作，一个技术点可以多种实现方式，在这里分享一下。

html部分

html部分很简单，在input file加上multiple属性，就能选择多个文件了

<input type="file" id="file-input" multiple>

js部分

1获取文件列表

    const files = event.target.files

2文件的长度

文件长度很好判断，通过files.length 判断长度即可

3文件的格式

文件格式可以通过两种方式判断，name的后缀名和type属性值，这里我通过判断文件的后缀名判断

let bol1 = files.every(i=>{
    return i.name.endsWith(".xls") || i.name.endsWith(".csv") || i.name.endsWith(".xlsx")
})
if(!bol1){
    console.log("文件后缀不正确")
}

这么写，控制台报了一个错

这个报错，其实是input元素file，选择文件时，返回的是一个类似数组的对象，俗称伪数组或类数组对象，类似于数组，但不是真正的数组，先要把伪数组转化为一个真正的数组,通过数组的扩展运算符或者Array.from，把伪数组转化为数组

  const files = [...event.target.files]
  const files = Array.from(event.target.files)

4文件名的长度

   if(files.some(i=>i.name.length>50)){
       console.log("文件名过长")
   }

5文件大小

计算文件大小，这个功能就和数组求和一样了，有很多方式，在这里，我用reduce方法去实现计算文件大小

let big = files.reduce((total,obj)=>{
    return total + obj.size
})

6其他功能点

上传多个文件，还有两点需要注意，第一个是文件有删除按钮，需要把要删除的文件，在数组里删除，不光要删除数组，还要把文件大小计算值减掉，第二个，可以多次上传，上传以后，还要把文件大小重新计算，这个推荐定义一个变量，专门计算多个文件大小值。

7通过FormData上传文件

多个文件上传，一般都是通过数组的形式去上传，具体参数要和后端协商好

    let formdata = new FormData()
    files.forEach(item=>{
        formdata.append("file",item)
    })

文件上传一般通过post形式

一个多文件上传功能实现，这里面要判断的东西比较多。

前端多文件上传，通过实现校验文件大小、文件个数、文件类型，对数组操作常用的方法