乐趣区

关于前端:修改element的upload组件支持多文件一次上传

jiezi

批改 element 的 upload 组件，反对多文件一次上传

Element 中的 Upload 组件应该是咱们经常会用到的一个组件，通常应用它做一些文件上传操作，不过对应的 demo 中尽管能够反对多个文件的抉择上传，但却是每个文件上传调用一个接口，这样操作起来就不是那么不便了。

明天就带大家批改一下组件，把要上传的文件放到同一个申请中发送给服务器。

首先看一下对应的文档

https://element-plus.gitee.io…

在属性列表中，咱们看到有这样一些属性能够供咱们应用

属性 形容
multiple 是否反对多选文件
on-change 文件状态扭转时的钩子，增加文件、上传胜利和上传失败时都会被调用
before-upload 上传文件之前的钩子，参数为上传的文件。若返回 false 或者返回 Promise 且被 reject，则终止上传。
http-request 笼罩默认的 xhr 行为，容许您实现本人的上传文件申请

而后就是说一下思路，

要实现多个文件放到一个表单里发送给后盾，咱们须要一次性获取所有文件，而后把文件 append 到一个表单中，最初发送申请。

首先看看第一步，咱们须要晓得对用的文件，那么，首先来找找文件被缓存到哪里了呢？或者说文件怎么能力一个一个存到表单中去呢

先看第一个简略例子 

<template>
  <div>
  <el-upload
   class="upload-demo"
   action="#"
   :http-request="() => {}"
   :on-change="handleChange"
   :before-upload="handleUpload"
   multiple
  \>
   <el-button type="primary">Click to upload</el-button>
   <template #tip>
        <div class="el-upload__tip">
​     jpg/png files with a size less than 500kb
​    </div>
   </template>
  </el-upload>
 </div>
</template>


<script>

export default {
 name: "Home",
 methods: {handleUpload(file) {console.log(file);
  },
  handleChange(file, fileList) {console.log(fileList.length,fileList);
  },
 },
};

</script>

运行一下，能够发现，它会打印屡次，而且每次都是先 console 打印 1 进去。

对应的 fileList 则是所有选中的文件。咱们须要一个标识，让 handleChange 函数只执行一次就好了，就持续批改成上面的代码 

<template>
  <div>
  <el-upload
   class="upload-demo"
   action="#"
   :http-request="() => {}"
   :on-change="handleChange"
   multiple
  \>
   <el-button type="primary">Click to upload</el-button>
   <template #tip>
        <div class="el-upload__tip">
​     jpg/png files with a size less than 500kb
​    </div>
   </template>
  </el-upload>
 </div>
</template>

<script>
export default {
 name: "Home",
 data() {
  return {collect: false,};
 },
 methods: {handleUpload(file) {console.log(2, file);
  },
  handleChange(file, fileList) {if (!this.collect) {​    console.log(1, fileList);
​    this.collect = true;
   }
  },
 },
};
</script>

曾经获取到了对应的文件 List，剩下的就是写一个办法，把他们 append 到表单中去，而后发送就好啦，上面再写一个函数解决一下 

function appendFile(files){const formData = new FormData()
  files.foreach((file)=>{formData.append('file',file)
  })
  return file
}

如果是须要记录下一开始抉择的文件个数的话，用上面代码就行了，具体细节自行替换下

function handleChange() {

  const files = document.getElementsByClassName('upload-demo')
  if (files && files.length > 0) {const upload = files[0].getElementsByTagName('input')
    if (
      upload &&
      upload.length > 0 &&
      upload[0].files &&
      upload[0].files.length > 0
    ) {fileNum.value = upload[0].files.length
    }
  }
}

下面函数中的 fileNum 就是最开始抉择的文件总数。当然你也能够先找到文件总数，而后在 before-upload 中将文件 append 到表单中，就是比拟麻烦一些。。不过讲真，其实我最开始就是这么写的（通过计数的形式，append 之后进行 - 1 操作，等到 0 的时候发送申请），哈哈哈，真的是顺着思路就做上来了。

退出移动版