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
    ];

示例

  beforeAvatarUpload() {
            let that = this
            const allowedTypes = ["image/bmp", "image/gif", "image/jpeg", "image/jpg", "image/png"];
            const fileType = url.file.type;

            if (!allowedTypes.includes(fileType)) {
                that.$message({
                    type: "warning",
                    message: '只能上传 bmp, gif, jpg, jpeg, png 格式的图像文件！',
                });
                return false;
            }
            if (url.file.size / 1024 / 1024 > 2) {
                that.$message({
                    type: "warning",
                    message: '缩略图大小不能超过2MB！',
                });
                return false;
            }
            let data = new FormData();
            data.append("imageFile", url.file);
            that.axios
                .post(window.global.uploadAddress + "/file/upload/image", data, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (data) {
                    if (data.data.code == 200) {
                        that.baseBoardLists.staticscene_mapimg = data.data.data.url
                    } else {
                        that.baseBoardLists.staticscene_mapimg = ''
                    }
                })
        },

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

贴张效果图