element-plus中el-upload組件限制上傳文件類型的方法

更新時間：2024年02月06日 11:40:59 作者：幼稚鬼_Blog

?Element Plus 中,el-upload 組件可以通過設置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下

element-plus中el-upload組件限制上傳文件類型

Element Plus 中，el-upload 組件可以通過設置 accept 屬性來限制上傳文件的格式

1.限制上傳圖片文件

<el-upload
  accept="image/*"
  action="/upload"
  :on-success="handleSuccess"
>
  <el-button slot="trigger" size="small" type="primary">點擊上傳</el-button>
</el-upload>

2.限制上傳 Excel 文件

<el-upload
  accept=".xls,.xlsx"
  action="/upload"
  :on-success="handleSuccess"
>
  <el-button slot="trigger" size="small" type="primary">點擊上傳</el-button>
</el-upload>

Element-plus upload上傳限制文件類型，文件大小

html部分：

        
<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    :http-request="uploadFile"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="message"
    :before-remove="beforeRemove"
    :limit="1"
    :on-exceed="handleExceed"
  >
    <el-button type="primary">選擇文件</el-button>
    <template #tip>
      <div class="el-upload__tip">
        支持格式：zip,ppt,pdf,word,excel,csv,png,jpg，單個文件不能超過20MB
      </div>
    </template>
  </el-upload>
</template>

JS部分：

        
// 上傳文件
const uploadFile = async (file) => {
  const allowedFileTypes = [
    "application/vnd.ms-excel", // Microsoft Excel 表格
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", //xlx
    "application/zip", // Zip files
    "application/vnd.ms-powerpoint", // PowerPoint files
    "application/pdf", // PDF files
    "application/msword", // Word files
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", //docx
    "text/csv", // CSV files
    "image/png", // PNG images
    "image/jpeg", // JPG images
  ];
  const maxSize = 20 * 1024 * 1024; // 20MB
  if (file) {
    const options = {
      meta: { temp: "demo" },
      mime: "json",
      headers: { "Content-Type": "text/plain" },
    };
    const isLt20M = file.file.size <= maxSize;
    if (!isLt20M) {
      ElMessage({
        type: "error",
        message: "文件大小超過20MB",
      });
      fileList.value = [];
      return false; // 阻止文件上傳
    }
    if (!allowedFileTypes.includes(file.file.type)) {
      ElMessage({
        type: "error",
        message: "文件格式錯誤",
      });
      fileList.value = [];
      return false; // 阻止文件上傳
    }
    try {
      //向后端上傳文件
      const result = await client.value.put(file.file.name, file.file, options);
      oosurl.value = result.url;
    } catch (e) {
      // Handle the error
    }
  } else {
    ElMessage.warning({
      message: "No file selected",
      type: "warning",
    });
  }

到此這篇關于element-plus中el-upload組件限制上傳文件類型的文章就介紹到這了,更多相關element-plus限制上傳文件類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: