element-Plus中el-upload一次上传多个文件

原创已于 2023-12-07 16:01:02 修改 · 2.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

于 2023-12-07 15:57:53 首次发布

Vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Element-Plus库的el-upload组件中实现一次上传多个文件的功能，包括模板代码展示、文件处理逻辑和点击确定后的上传操作。

element-Plus中el-upload一次上传多个文件

实现的页面效果
在这里插入图片描述

话不多说直接上代

template模板代码

  <el-dialog
        v-model="dialogTableVisible"
        title="上传文件"
        style="margin-top: 100px"
      >
        <el-upload
          class="upload-demo"
          v-loading="formLoading"
          :file-list="fileList"
          :auto-upload="false"
          :limit="10"
          action="#"
          :multiple="true"
          :on-change="uploadSuccess"
          accept=".xlsx,.jpg, .png, .gif,.json"
          drag
        >
          <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" style="color: red">
              可以上传.xlsx,.jpg, .png, .gif,.json格式
            </div>
          </template>
        </el-upload>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="uploadSure" :disabled="isbutton">确定</el-button>
            <el-button type="primary" @click="dialogTableVisible = false">
              取消
            </el-button>
          </span>
        </template>
     </el-dialog

js代码

// loading加载效果
const formLoading = ref(false);
let fileList = reactive<UploadUserFile[]>([]);//用于存储文件列表的数组
let uploadSuccess = (item: any, itemList: any) => {
  //   console.log(itemList);
  fileList = itemList; 
};
点击确定按钮发送请求到后端
let uploadSure = async () => {
  if (fileList.length == 0) {
    ElMessage.error("请上传文件");
    return;
  }
  isbutton.value = true;
  const formData = new FormData();
  // 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
  fileList.forEach((file: any) => {
    formData.append("files", file.raw);
  });
  formLoading.value = true;
  //调用接口发送请求，这里是自己已经封装好的接口函数
  await FileUploadApi(formData).then((res) => {
    formLoading.value = false;
    dialogTableVisible.value = false;
    //上传成功重新调用页面接口数据
    getFile();
    fileList = [];
    ElMessage({
      showClose: true,
      message: "上传成功",
      type: "success",
    });
  });
};