element-ui upload accept=““ 不起作用(关于element-u上传文件类型限制)

柯凯旋
2023-12-01
<el-upload
              class="upload-demo"
              ref="upload"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :limit="1"
              accept=".xls,.xlsx"
              :on-preview="handlePreview"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-upload="beforeAvatarUpload"
              :file-list="fileList"
              :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将发货表单拖到此处,或<em>点击选择</em></div>
                <div style="line-height: 25px" class="c-9">每次只能导入一个文件</div>
          </el-upload>

然而,发现 accept=".xls,.xlsx" 并没有过滤掉其他文件类型

之前的做法是自己加个判断:

 beforeAvatarUpload(file){
           let fileName=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = fileName === 'xls'
            const extension2 = fileName=== 'xlsx'
            if(!extension && !extension2) {
                this.$message({
                    message: '上传文件只能是 xls、xlsx格式!',
                    type: 'warning'
                });
            }
 }

但是这样做是多此一举了,其实并不是上传组件的问题,而是文件后缀(扩展名)对应有MIME类型,方便iis中或其他服务器对相应的文件进行解析。有些文件的后缀名没有默认解析就出现上传后无法访问或者下载的问题,这个时候就要设置文件后缀对应的MIME类型,设置后才能访问或者下载。accept对应的是MIME类型,所以我们要将文件后缀(扩展名)对应的MIME类型填入。

所以accept=".xls,.xlsx" 应该写成accept=“application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”

参照下面

 后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

 类似资料: