多文件上传

HTML中实现多文件上传是通过用<input type="file">元素的multiple属性，以下简单描述多文件上传的步骤

HTML表单准备，使用<input type="file">元素，并为其添加multiple属性，以允许用户选择多个文件。

<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属性允许用户选择多个文件。

以上是使用html自带的标签元素实现的文件上传

实际工作中往往使用较多的是JavaScript方式实现多文件的上传，因为除了上传文件外，还需要额外上传相关的文件元数据信息，所以使用JavaScript的方式更加实用。

看下面的示例，基于vue的框架编写的文件上传组件

<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">当前文件夹：</span><span class="content">{{folderObj.filename}}</span></el-col><el-col :span="12" class="file-info-update-time"><span class="title">最后更新时间：</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">拖动文件到这里或者<em>点击上传</em></div><template #tip><div class="el-upload__tip">文件大小不超过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">开始上传</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('文件上传成功')})})},/*** 监测文件上传控件变化*/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>