Element Plus 文件上传限制格式 大全

    <el-upload class="upload-demo" drag :on-remove="handleRemoves" action="#" :http-request="handleBeforeUpload"
          :on-success="handleAvatarSuccess" :show-file-list="false">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
              拖动上传or<em>点击上传</em>
           </div>
     </el-upload>

 我这个不是用before-upload 上传前钩子 因为我用这个的话 会报错误 详情看我之前的文章

之前链接   所以我用:http-request来代替默认上传 拿到的参数其实跟before-upload一样

const handleBeforeUpload = (file) => {
    console.log(file,'上传的附件');
     const allowedFileTypes = [
        'image/jpeg',   // JPEG 图像文件
        'image/png',    // PNG 图像文件
        'video/mp4',    // MP4 视频文件
        'video/avi',    // AVI 视频文件 (请确认正确的MIME类型)
        'application/msword',  // Microsoft Word 文档
         'application/vnd.ms-excel',  // Microsoft Excel 表格
         'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
         'application/pdf',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    ];
 
    // 获取文件的类型
    const fileType = file.file.type;
    // console.log(file.file.type, '上传的附件');
    if (!allowedFileTypes.includes(fileType)) {
        ElMessage({
            type: 'error',
            message: '上传格式错误',
        })
        return false; // 阻止文件上传
    } else { 
            getfileupload(file.file).then((res) => {
            if (res.code == 200 && res.data) {
                    fileName.value = res.data.name
                    let obj = { name: res.data.name + '.' + res.data.format, id: res.data.fileId }
                    fileListArr.value.push(obj)
                    let id = res.data.fileId
                    uploadFileId.value.push(id)
            }
        })
    }
}

log的file数据 :

allowedFileTypes 数组列出了一些常见的文件类型和它们的 MIME 类型  借此来判断上传的数据格式 

  const allowedFileTypes = [
        'image/jpeg',   // JPEG 图像文件
        'image/png',    // PNG 图像文件
        'video/mp4',    // MP4 视频文件
        'video/avi',    // AVI 视频文件 (请确认正确的MIME类型)
        'application/msword',  // Microsoft Word 文档
         'application/vnd.ms-excel',  // Microsoft Excel 表格
         'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',//xlx
         'application/pdf',  //pdf
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document' //doc
    ];

下一章 书写一下 word excel pdf 图片 视频文件的预览效果 

贴张效果图