自定义el-upload上传

目录

前言

工具

引入库 

代码实现

注意

---

前言

       element-plus我相信很多前端小伙计也是使用过的，里面提供的ui组件可以说是十分好用，而这次我们目光聚焦到el-upload上，它里面提供许多的api，可以说是十分好用，但是我遇到了个业务需要:el-upload选择多个文件之后点击确定，合成一个请求，然后自动上传......

工具

    "element-plus": "^2.3.5",
    "vue": "^3.2.13",

引入库 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).use(router).mount('#app')

代码实现

<template>
    <div style="width: 200px;">
        <el-upload :auto-upload="false" :show-file-list="false" accept=".stl" multiple :on-change="handleUploadModelFile()">
            <el-button type="primary">上传文件</el-button>
        </el-upload>
    </div>
</template>
<script setup>

//合并上传的stl模型文件
function handleUploadModelFile() {
    let timer = undefined
    // let formData = new FormData()
    let fileList = []
    return async (f) => {
        fileList.push(f)
        if (!timer) {
            timer = setTimeout(() => {
                console.log(fileList);
                fileList = []
                timer = undefined
            }, 0)
        }

    }

}
</script>

        这里难点在于发送请求上传用户选择的文件需要在用户选择完文件之后调用的，我们不知道用户需要上传多少文件，这里利用异步函数setTimeout的特点，每次上传完多个文件之后会调用el-upload的on-change钩子，比如选择了3个文件，那么on-change钩子调用3次，fileList压入了3个文件对象，而setTimeout传入的函数会在调用完on-change之后执行，我们有了fileList，我们就可以这个传入setTimeout的函数内，执行多文件同步上传，或者组合成一个表单再上传。

注意

1. on-change是一个钩子，传入的是一个函数做变量，不用加"()"，而且要用":"修饰不要用"@"，上面因为我使用的是闭包方法，返回的是一个函数，所以小心搞混了喔。
2. el-upload上传文件是使用多文件多请求上传，比起文件组合成一个表单在上传速度方面更具有优势，但是一个域名下的请求链接只能有6个，之后的请求需要等待，所以使用哪种方法得看业务需求，我这里是想将路走宽一点，多个方法总会有好处。
3. 用户点击上传文件之后，会打开文件管理器，但有时候会很慢，这个时候不如加个accept属性，里面写上需要上传的文件格式，这样文件管理器会进行过滤掉不符合accept属性的文件，这样打开会快些