HTML中實(shí)現(xiàn)多文件上傳是通過(guò)用<input type="file">元素的multiple屬性，以下簡(jiǎn)單描述多文件上傳的步驟

HTML表單準(zhǔn)備，使用<input type="file">元素，并為其添加multiple屬性，以允許用戶選擇多個(gè)文件。

<form action="/upload" method="post" enctype="multipart/form-data"><label for="fileInput">選擇文件：</label><input type="file" id="fileInput" name="files[]" multiple><input type="submit" value="上傳">
</form>

在上述例子中，files[]作為文件域的名稱，multiple屬性允許用戶選擇多個(gè)文件。

以上是使用html自帶的標(biāo)簽元素實(shí)現(xiàn)的文件上傳

實(shí)際工作中往往使用較多的是JavaScript方式實(shí)現(xiàn)多文件的上傳，因?yàn)槌松蟼魑募?#xff0c;還需要額外上傳相關(guān)的文件元數(shù)據(jù)信息，所以使用JavaScript的方式更加實(shí)用。

看下面的示例，基于vue的框架編寫(xiě)的文件上傳組件

<template><el-dialogclass="upload-file-dialog"title="文件上傳"width="600px"height="300px"><el-row class="file-info"><el-col :span="12" class="file-info-name"><span class="title">當(dāng)前文件夾：</span><span class="content">{{folderObj.filename}}</span></el-col><el-col :span="12" class="file-info-update-time"><span class="title">最后更新時(shí)間：</span><span class="content">{{folderObj.updateTime}}</span></el-col></el-row><el-row><el-col><el-upload:auto-upload="false"class="upload-demo"dragaction="#"multiple:on-change="uploadContext.handleChange"v-model:file-list="formData.fileList"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">拖動(dòng)文件到這里或者<em>點(diǎn)擊上傳</em></div><template #tip><div class="el-upload__tip">文件大小不超過(guò)10MB</div></template></el-upload></el-col></el-row><!-- <el-row><img :src="formData.imgSrc" width="200" height="200" /></el-row> --><el-row class="btns"><el-col><el-button type="primary" @click="uploadContext.upload">開(kāi)始上傳</el-button></el-col></el-row></el-dialog>
</template><script setup>
import { reactive } from 'vue'
import axios from 'axios'
const props = defineProps(['folderObj'])
const formData = reactive({fileList: [],imgSrc: ''
})const uploadContext = {upload: ()=>{formData.fileList.forEach((item, index)=>{let formData = new FormData()formData.append('fileId', item.uid)formData.append('filename', item.name)formData.append('file', item.raw)formData.append('fileSize', item.size)formData.append('fileSizeDesc', item.size + '')formData.append('fileSuffix', item.name.substring(item.name.lastIndexOf(".")+1))formData.append('identifier', item.raw.type)axios.post('/file/upload', formData).then(res=>{console.log('文件上傳成功')})})},/*** 監(jiān)測(cè)文件上傳控件變化*/handleChange: (uploadFile, uploadFileList)=>{// 這里添加文件上傳的邏輯處理代碼}
}</script><style lang="scss">
.upload-file-dialog {.el-dialog__body{padding: 10px 15px;}.file-info{padding: 0 0 5px 0;.file-info-update-time{text-align: right;}}.btns{.el-col{text-align: right;}}
}</style>