vue-上传附件

<template>
  <div class="upload-file">
    <!-- multiple  多选文件，有部分文件会丢失 -->
    <el-upload
      v-show="isDel"
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="upload"
    >
      <!-- 上传按钮 -->
      <el-button class="shangchuanBtn" round>上传附件</el-button>
      <!-- 上传提示 增加<template #tip>包裹元素，参考bug:6466 -->
      <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>
    <!-- 文件列表 -->
    <el-table :data="modelValue" style="margin-top: 10px;">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="name" label="附件名称" min-width="100" />
      <el-table-column prop="size" label="文件大小" min-width="100">
        <template v-slot="scope">
          <span> {{ computeSize(scope.row.size) }} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
<!--          <el-button
            v-if="getPreviewAuth(scope.row)"
            type="text"
            class="chakan"
            @click.prevent="handleChakan(scope.row)"
          >预览</el-button>
          <el-button type="text" class="xiazai" @click.prevent="handleDownload(scope.row)">下载</el-button>-->

          <div class="btn chakan" style="display: inline-block" @click.prevent="handleChakan(scope.row)">预览</div>
          <div class="btn xiazai" style="display: inline-block" @click.prevent="handleDownload(scope.row)">下载</div>
          <el-button
            v-show="isDel"
            type="text"
            class="shanchu"
            @click.prevent="handleDelete(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer :title="pdfTitle" v-model="openPdf" size="50%" custom-class="lookPage">
      <div class="paddingBox">
        <!--        pdf-->
        <iframe :src="currentFileUrl" width="100%" height="99%" v-if="currentFileType == 'pdf'"></iframe>
        <!--        png-->
        <img v-if="currentFileType == 'image'" :src="currentFileUrl" />
        <!--        -->
        <div v-if="currentFileType == 'video'">
          <video class="wid100" style="height: 500px" :src="currentFileUrl" controls>浏览器不支持此格式</video>
        </div>
        <div v-if="currentFileType == 'audio'">
          <audio :src="currentFileUrl" controls style="height: 100px; width: 500px"></audio>
        </div>
        <div v-if="currentFileType === 'xlsx'">
          暂不支持
          <!-- <iframe :src="currentFileUrl" width="100%" height="99%"></iframe> -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth";
import { onMounted } from "vue-demi";
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,
  }
});

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const fileList = 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) {
  const tabList = [...props.modelValue];
  tabList.push({
    name: file.name,
    size: file.size,
    url: file.url || file?.response?.url,
  })
  // let newVal = fileList.map(item => {
  //   return {
  //     name: item.name,
  //     size: item.size,
  //     url: item.url || item?.response?.url,
  //   }
  // })
  emit("update:modelValue", tabList);
  fileList.value = [...tabList];
  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);
  const tabList = [...props.modelValue];
  tabList.splice(index, 1);
  emit("update:modelValue", tabList);
  fileList.value = [...tabList];
}

//预览文件
function handleChakan(row) {
  currentFileUrl.value = import.meta.env.VITE_APP_BASE_API + row.url;
  let fileType = getFileType(row.url).toLowerCase(); //统一转小写适配下面判断;
  if (fileType == "png" || fileType == "bmp" || fileType == "jpeg" || fileType == "jpg") {
    currentFileType.value = "image";
  } else if (fileType == "avi" || fileType == "mp4") {
    currentFileType.value = "video";
  } else if (fileType == "mp3") {
    currentFileType.value = "audio";
  } else if (
    fileType == "pdf" ||
    fileType == "doc" ||
    fileType == "docx"
  ) {
    // fileType == "xls" 接口还未支持xls转pdf
    currentFileType.value = "pdf";
  } else if (fileType == "xls" || fileType == "xlsx") {
    currentFileType.value = "xlsx";
  }
  openPdf.value = true;
}

//下载文件
function handleDownload(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 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) : '';
}

onMounted(() => {
  fileList.value = [...props.modelValue];
})

onBeforeUnmount(() => {
  proxy.$refs.upload.clearFiles();
})

</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;
    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;
  }
}
.btn{
  font-size: 12px;
  margin-right: 6px;
  cursor: pointer;
}
</style>