上传 多选文件，有部分文件会丢失

<template>
  <div class="upload-file">
    <!-- multiple  多选文件，有部分文件会丢失 -->
    <el-upload
      v-show="isDel"
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="modelValue"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="upload"
      :disabled="props.modelValue.length >= props.limit ? true : false"
    >
      <!-- 上传按钮 -->
      <el-button
        class="shangchuanBtn"
        round
        :disabled="props.modelValue.length >= props.limit ? true : false"
        >上传图片</el-button
      >
      <!-- 上传提示 -->
      <template #tip>
        <div class="el-upload__tip" v-if="showTip">
          <template v-if="fileType">
            支持
            <b style="color: #f56c6c">{{ fileType.join("/") }}</b
            >格式
          </template>
          <template v-if="fileSize">
            ， 大小
            <b style="color: #f56c6c">{{ fileSize }}MB</b>以内
          </template>
          <span>
            ，数量不超过
            <b style="color: #f56c6c">{{ limit }}</b
            >个
          </span>
        </div>
      </template>
    </el-upload>

    <div class="wrapperImg">
      <template v-for="(item, index) in modelValue">
        <div :key="item.url" v-if="item.url" class="upload-img">
          <el-image
            style="width: 150px; height: 150px"
            :src="baseUrl + item.url"
            fit="cover"
          />
          <div class="upload-btn">
            <div class="btn chakan" @click.prevent="handleChakan(item)"></div>
            <div class="btn xiazai" @click.prevent="handleDownload(item)"></div>
            <div
              v-if="!isRead"
              class="btn shanchu"
              @click.prevent="handleDelete(index)"
            ></div>
          </div>
        </div>
      </template>
    </div>

    <el-drawer
      :title="pdfTitle"
      v-model="openPdf"
      size="50%"
      custom-class="lookPage"
    >
      <div class="paddingBox">
        <img :src="currentFileUrl" />
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth";
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
  // 数量限制
  limit: {
    type: Number,
    default: 5,
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 5,
  },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => [
      "doc",
      "docx",
      "xls",
      "ppt",
      "txt",
      "pdf",
      "png",
      "mp4",
      "mp3",
    ],
  },
  // 是否显示提示
  isShowTip: {
    type: Boolean,
    default: true,
  },
  //  查看pdf弹框内容
  pdfTitle: {
    type: String,
    default: "预览",
  },
  //  是否可删除
  isDel: {
    type: Boolean,
    default: true,
  },
  isRead: {
    type: Boolean,
    default: false,
  },
});

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(
  import.meta.env.VITE_APP_BASE_API + "/common/uploadtopdf"
); // 上传的图片服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() });
const showTip = computed(
  () => props.isShowTip && (props.fileType || props.fileSize)
);
const openPdf = ref(false);
const currentFileUrl = ref("");

const currentFileType = ref("");

//判断是否显示“预览”按钮
const getPreviewAuth = computed(() => {
  return (row) => {
    let fileUrl = row.response ? row.response.url : row.url ? row.url : "";
    const fileType = getFileType(fileUrl)?.toLowerCase();
    const isPreview = ["jpg", "jpeg", "png", "pdf", "bpm", "avi", "mp4", "mp3"];
    return isPreview.indexOf(fileType) !== -1;
  };
});

//获取文件格式
function getFileType(fileUrl) {
  const fileType = fileUrl.split(".")[1];
  return fileType;
}

// 上传前校检格式和大小
function handleBeforeUpload(file) {
  // 校检文件类型

  if (props.fileType.length) {
    let fileExtension = "";
    if (file.name.lastIndexOf(".") > -1) {
      fileExtension = file.name
        .slice(file.name.lastIndexOf(".") + 1)
        .toLowerCase();
    }
    const isTypeOk = props.fileType.some((type) => {
      // if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
    if (!isTypeOk) {
      proxy.$modal.msgError(
        `文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`
      );
      return false;
    }
  }
  console.log(props.modelValue);
  if (props.modelValue.length >= props.limit) {
    proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
    return false;
  }
  // 校检文件大小
  if (props.fileSize) {
    const isLt = file.size / 1024 / 1024 < props.fileSize;
    if (!isLt) {
      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
      return false;
    }
  }
  proxy.$modal.loading("正在上传文件，请稍候...");
  return true;
}

// 文件个数超出
function handleExceed(files, fileList) {
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
}

// 上传失败
function handleUploadError(err) {
  proxy.$modal.msgError("上传文件失败");
}

// 上传成功回调
function handleUploadSuccess(res, file, fileList) {
  let oldImg = props.modelValue;
  let newVal = fileList.map((item) => {
    return {
      url: item.url || item?.response?.url,
      name: item.name || "图片",
    };
  });
  let newImgArr = oldImg.concat(newVal[newVal.length - 1]);
  emit("update:modelValue", newImgArr);
  proxy.$modal.closeLoading();
}

//换算文件大小(原文件单位：B，转成KB或MB）
function computeSize(size) {
  if (size) {
    return size / 1024 / 1024 > 1
      ? (size / 1024 / 1024).toFixed(2) + "MB"
      : parseInt(size / 1024) + "KB";
  } else {
    return "";
  }
}

// 删除文件
function handleDelete(index) {
  //清除el-upload内部的fileList
  proxy.$refs.upload.clearFiles();
  // proxy.$refs.upload.handleRemove(row);
  props.modelValue.splice(index, 1);
  emit("update:modelValue", props.modelValue);
}

//预览文件
function handleChakan(row) {
  currentFileUrl.value = import.meta.env.VITE_APP_BASE_API + row.url;
  openPdf.value = true;
}

//下载文件
function handleDownload(row) {
  console.log(row);
  let fileUrl = row.url;
  //&delete=true 下载后删除
  window.location.href =
    import.meta.env.VITE_APP_BASE_API +
    "/common/download4Url?fileUrl=" +
    fileUrl +
    "&fileName=" +
    row.name;
}
function leave() {
  openPdf.value = false;
}
// 获取文件名称
function getFileName(name) {
  if (name.lastIndexOf("/") > -1) {
    return name.slice(name.lastIndexOf("/") + 1);
  } else {
    return "";
  }
}

// 对象转成指定字符串分隔
function listToString(list, separator) {
  let strs = "";
  separator = separator || ",";
  for (let i in list) {
    strs += list[i].url + separator;
  }
  return strs != "" ? strs.substr(0, strs.length - 1) : "";
}
</script>

<style scoped lang="scss">
iframe {
  border: none !important;
}
img {
  max-width: 100%;
}
:deep(div) {
  .el-upload {
    text-align: left !important;
  }
  .el-upload {
    text-align: left !important;
  }
  .el-upload__tip {
    display: inline-block;
    float: none;
  }
  .el-upload__tip {
    display: inline-block;
    padding-left: 10px;
    float: none;
    cursor: auto;
  }
  .upload-file-uploader .el-upload--text {
    text-align: left !important;
  }
  .upload-file-uploader {
    margin-bottom: 5px;
  }
  .upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
  }
  .upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
  }
  .ele-upload-list__item-content-action .el-link {
    margin-right: 10px;
  }
}
.wrapperImg {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 870px;
  .upload-img {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 10px;
    border-radius: 4px;
    overflow: hidden;

    .upload-btn {
      display: none;
      cursor: pointer;
      > div {
        margin-right: 14px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    &:hover {
      .upload-btn {
        width: 150px;
        height: 150px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>