vue结合element ui 实现多个文件上传、并删除不符合条件的

多个文件上传的核心就是将文件append进FormData的实例中，向后台请求时将实例对象传送过去。

页面结构：

 多个文件上传，传送的数据：

先上代码：

html部分：

1.  
   <el-upload
2.  
   class="upload-demo"
3.  
   ref="upload"
4.  
   action=""
5.  
   :on-change="handleChange"
6.  
   :on-remove="handleRemove"
7.  
   :file-list="fileList"
8.  
   :limit="3"
9.  
   :on-exceed="handleExceed"
10.  
    multiple
11.  
    :auto-upload="false">
12.  
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
13.  
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交文件</el-button>
14.  
    </el-upload>

js部分（this.$request是我自定义的请求方式，大家可以根据自身需要来调整）：

1.  
   data() {
2.  
   return {
3.  
   fileList: []
4.  
   }
5.  
   },
6.  
   methods: {
7.  
   // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
8.  
   handleChange(file, fileList) {
9.  
   // 对选中的文件做判断
10.  
    if (file.raw.type !== 'text/plain') {
11.  
    this.$refs.upload.handleRemove(file)
12.  
    return
13.  
    }
14.  
    this.fileList = fileList
15.  
    },
16.  
    // 文件列表移除文件时的钩子
17.  
    handleRemove(file, fileList) {
18.  
    console.log('移除', file, fileList)
19.  
    this.fileList = fileList
20.  
    },
21.  
    // 文件超出个数限制时的钩子
22.  
    handleExceed(files, fileList) {
23.  
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length fileList.length} 个文件`);
24.  
    },
25.  
    // 提交文件
26.  
    submitUpload() {
27.  
    if (this.fileList.length !== 0) {
28.  
    const formData = new FormData()
29.  
    this.fileList.forEach((item, index) => {
30.  
    formData.append(`file${index 1}`, item.raw)
31.  
    console.log(item.raw, item)
32.  
    })
33.  
    // 后端上传接口
34.  
    this.MultipartFile(formData).then(res => {
35.  
    console.log(res)
36.  
    }).catch(err => {
37.  
    console.log(err)
38.  
    })
39.  
    } else {
40.  
    this.$message({
41.  
    message: '提交文件数量不可为空',
42.  
    type: 'warning'
43.  
    })
44.  
    }
45.  
    },
46.  
    // 后端上传接口
47.  
    MultipartFile(data) {
48.  
    return this.$request({
49.  
    url: 'https://jsonplaceholder.typicode.com/posts/',
50.  
    method: 'post',
51.  
    headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
52.  
    data
53.  
    })
54.  
    },
55.  
    }

 解析：

1. 我们想要的效果是手动一次性上传多个文件，但是文件选取时，默认是自动上传的，所以要设置不立即上传

:auto-upload="false"

2. 由于我们想要上传多个文件，必须自定义网络请求中的一些内容，我们会在提交文件的时候手动发起网络请求，所以将action设置为"",或者也看到一些文章设置为 # ,

action=""

3. on-change 、 on-remove 和 on-exceed 钩子函数，我们要在on-change 、 on-remove钩子函数中存储文件到数组中，在 on-exceed 钩子函数中设置文件超出个数的处理，设置这个钩子函数时，要设置限制文件个数，使用 limit 字段

很重要的一个地方就是对不符合条件的文件进行移除，我们不但不让该文件存储在文件数组里，而且还要从upload中删除，不然的话，不符合条件的文件还是会在页面上显示的。例如，我们只想让文件类型为 text/plain的文件保存并显示在页面中，但是我们不对页面中显示的文件做手动的删除：

代码：

1.  
   handleChange(file, fileList) {
2.  
   console.log(file.raw.type)
3.  
   if (file.raw.type !== 'text/plain') {
4.  
   return
5.  
   }
6.  
   this.fileList = fileList
7.  
   },

效果：不符合要求的docx结尾的文件也显示在了页面

所以，我们要手动的去删除upload中的不符合条件的文件，核心代码：

1.  
   if (file.raw.type !== 'text/plain') {
2.  
   this.$refs.upload.handleRemove(file)
3.  
   return
4.  
   }

效果（只有txt文件出现在页面上）：

总的html部分：

1.  
   :on-change="handleChange"
2.  
   :on-remove="handleRemove"
3.  
   :limit="3"
4.  
   :on-exceed="handleExceed"

js部分：

1.  
   handleChange(file, fileList) {
2.  
   // 对选中的文件做判断
3.  
   if (file.raw.type !== 'text/plain') {
4.  
   this.$refs.upload.handleRemove(file)
5.  
   return
6.  
   }
7.  
   this.fileList = fileList
8.  
   },
9.  
    
10.  
    handleRemove(file, fileList) {
11.  
    console.log('移除', file, fileList)
12.  
    this.fileList = fileList
13.  
    },
14.  
     
15.  
    handleExceed(files, fileList) {
16.  
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length fileList.length} 个文件`);
17.  
    },

4. 提交文件

触发提交文件函数后，可以先设置文件提交的一些要求，我设置的是有文件才能提交。。。

文件的提交要使用 FormData 构造函数来new一个实例，然后将文件数组中的文件都append到实例对象里边

1.  
   const formData = new FormData()
2.  
   this.fileList.forEach(item => {
3.  
   formData.append('files', item.raw)
4.  
   console.log(item.raw, item)
5.  
   })

append('请求接口时的参数','数据')

 5. 接下来就是调用接口传输数据了，一般向后端传输数据都是用的post，这里很重要的就是设置请求头。

1.  
   this.$request({
2.  
   url: 'https://jsonplaceholder.typicode.com/posts/',
3.  
   method: 'post',
4.  
   headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
5.  
   data: 'form实例'
6.  
   })

 差不多就是这样了，有什么错误，留言改正。

这篇好文章是转载于：学新通技术网