多文件上传

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-dialog
    class="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"
          drag
          action="#"
          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>