ElUpload 附件上传

不带内置的进度条

1.定义两个变量用户文档列表的展示，以及上传

//文档列表
const docFileList = ref([]);
//上传文档列表
const uploadDocList = ref([]);

2. 上传文档

//上传文档
const handleProgressDoc = async (uploadFile) => {
  if (
    [
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/pdf',
    ].includes(uploadFile.raw.type)
  ) {
    const [err, data] = await fireUpload({
      files: [uploadFile.raw],
    });

    if (!err) {
      uploadDocList.value.push({ uid: uploadFile.uid, ...data[0] });
    } else {
      ElMessage.error(err);
    }
  } else {
    ElMessage({
      message: `上传文件只能是 .doc, .docx,.pdf, 格式!`,
      type: 'warning',
    });
    docFileList.value.pop();

    return;
  }
};

3. 删除文档

//取消上传文档
const handleRemoveDoc = async (uploadFile) => {
  const removeItem = uploadDocList.value.filter((i) => i.uid === uploadFile.uid)[0];

  docFileList.value = docFileList.value.filter((i) => i.uid != uploadFile.uid);
  uploadDocList.value = toRaw(uploadDocList.value).filter((i) => i.uid != uploadFile.uid);

  const [err] = await fireDel({
    object: removeItem.object,
  });

  if (err) {
    ElMessage.error(err);
  }
};

4. 模板代码

 <ElUpload
              v-model:file-list="docFileList"
              list-type="text"
              :auto-upload="false"
              :on-change="handleProgressDoc"
              :on-exceed="handleExceedDoc"
              limit="5"
              accept=".docx,.pdf,.xlsx"
            >
              <div class="primary_btn">
                <ElIcon><Upload /></ElIcon>
                上传文件
              </div>
              <template #file="{ file }">
                <div class="file_box">
                  <div class="file_title" :title="file.name">{{ file.name ?? file.filename }}</div>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemoveDoc(file)">
                      <ElIcon><Delete /></ElIcon>
                    </span>
                  </span>
                </div>
              </template>
              <template #tip>
                <div class="el-upload__tip">支持docx.pdf.xlsx格式,最多上传5个附件</div>
              </template>
  </ElUpload>

6. 完整代码

<script setup>
import { ElDialog, ElForm, ElFormItem, ElIcon, ElInput, ElMessage, ElUpload } from 'element-plus';
import { reactive, toRefs, ref, toRaw, onMounted } from 'vue';
import { Upload, Delete } from '@element-plus/icons-vue';
import { fireUpload, fireDel } from '@/apis/api-files';




const formRef = ref(null);
//文档列表
const docFileList = ref([]);
//上传文档列表
const uploadDocList = ref([]);


//上传文档
const handleProgressDoc = async (uploadFile) => {
  if (
    [
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/pdf',
    ].includes(uploadFile.raw.type)
  ) {
    const [err, data] = await fireUpload({
      files: [uploadFile.raw],
    });

    if (!err) {
      uploadDocList.value.push({ uid: uploadFile.uid, ...data[0] });
    } else {
      ElMessage.error(err);
    }
  } else {
    ElMessage({
      message: `上传文件只能是 .doc, .docx,.pdf, 格式!`,
      type: 'warning',
    });
    docFileList.value.pop();

    return;
  }
};

//取消上传文档
const handleRemoveDoc = async (uploadFile) => {
  const removeItem = uploadDocList.value.filter((i) => i.uid === uploadFile.uid)[0];

  docFileList.value = docFileList.value.filter((i) => i.uid != uploadFile.uid);
  uploadDocList.value = toRaw(uploadDocList.value).filter((i) => i.uid != uploadFile.uid);

  const [err] = await fireDel({
    object: removeItem.object,
  });

  if (err) {
    ElMessage.error(err);
  }
};


</script>


<template>
  <div class="compiler-box-root">
   <ElUpload
              v-model:file-list="docFileList"
              list-type="text"
              :auto-upload="false"
              :on-change="handleProgressDoc"
              :on-exceed="handleExceedDoc"
              limit="5"
              accept=".docx,.pdf,.xlsx"
            >
              <div class="primary_btn">
                <ElIcon><Upload /></ElIcon>
                上传文件
              </div>
              <template #file="{ file }">
                <div class="file_box">
                  <div class="file_title" :title="file.name">{{ file.name ?? file.filename }}</div>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemoveDoc(file)">
                      <ElIcon><Delete /></ElIcon>
                    </span>
                  </span>
                </div>
              </template>
              <template #tip>
                <div class="el-upload__tip">支持docx.pdf.xlsx格式,最多上传5个附件</div>
              </template>
            </ElUpload>
  </div>
</template>

带内置的进度条

1. 模板

   <ElUpload
              v-model:file-list="uploadDocList"
              :action="apiPath_fireUpload" //接口路径
              name="files"
              :headers="FileHeaders" //文件上传头
              :show-file-list="true"
              :auto-upload="true"
              :before-upload="(file) => beforeAvatarUpload('fj', file)" //上传前验证
              :on-success="success"
              :on-error="error"
              :on-exceed="() => exceed()"
              :on-remove="handleRemoveFire"
              accept=".docx,.pdf,.xlsx"
              :limit="5"
            >
              <div class="file_box">
                <div class="primary_btn">
                  <ElIcon><Upload /></ElIcon>
                  上传文件
                </div>
                <div class="fj-tip">支持docx.pdf.xlsx格式,最多上传5个附件</div>
              </div>
            </ElUpload>

2. 方法

// 文件上传头
export const FileHeaders = {
  Authorization: sessionStorage.getItem(KEY_TOKEN) ? `Bearer ${sessionStorage.getItem(KEY_TOKEN)}` : '',
  'CUSTOMIZE-CLIENT-TYPE': 'web',
};



// 上传前验证
const beforeAvatarUpload = (key, rawFile) => {
  switch (key) {
    case 'fj':
      if (
        ![
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          'application/pdf',
        ].includes(rawFile.type)
      ) {
        ElMessage.error('仅支持PNG.JPG.JPEG.BPM格式!');

        return false;
      } else if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('图片单张不超过10M!');

        return false;
      }

      break;

    default:
      if (!UPLOAD_FILE_TYPE_PHOTO(rawFile)) {
        ElMessage.error('仅支持PNG.JPG.JPEG.BPM格式!');

        return false;
      } else if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('图片单张不超过10M!');

        return false;
      }

      break;
  }

  return true;
};



// 成功回调
const success = () => {
  ElMessage.success('成功');
};

// 失败回调
const error = () => {
  ElMessage.error('上传失败');
};

// 超出限制
const exceed = () => {
  ElMessage.warning('支持docx.pdf.xlsx格式，最多上传5个附件');
};

// 删除文档
const handleRemoveFire = async (uploadFile) => {
  if ('response' in uploadFile) {
    removeDocList.value.push(uploadFile?.response?.[0]);
  } else {
    removeDocList.value.push(uploadFile);
  }
};