el-upload 如何限制上传文件为压缩包

Hilda
  • 51

el-upload使用accept等于“.zip”限制上传文件为压缩包格式,但是不好使,例如excel文件还是可以上传,不知道为什么

使用的饿了么UI开发vue项目,使用el-upload上传文件,accept如何限制压缩包?

    <el-upload
        :headers="headers"
        :action="shpAction"
        :on-preview="handlePreview"
        :on-remove="handleShpRemove"
        :before-remove="beforeRemove"
        :on-error="handleFileError"
        :on-exceed="handleExceedShape"
        accept=".zip"
        :limit="1"
        :before-upload="beforeFileUpload"
        :on-success="handleShpFileSuccess"
        :file-list="shpFile">
        <el-button size="small" type="primary">上传附件</el-button>
   </el-upload>

希望可以限制上传文件为压缩包,但是实际上写成accept=".zip"的时候,弹出的文件选择除了.zip还有excel,希望默认的文件选择就只有.zip,有了解的朋友帮忙解答一下吧

回复
阅读 7.7k
5 个回答

accept=".zip" 可以在弹出文件选择器的时候默认显示.zip文件 但用户可以手动选择所有文件 需要在before-upload判断一下

石头缝里那抹玉
  • 2
新手上路,请多包涵

accept="aplication/zip",需要用MIME类型列表的格式

用户还是可以手动选择所有文件,你需要自己在beforeUpload做限制判断大致逻辑如下:

beforeUpload: file => {
const isZip = file.name.endsWith('.zip');
if (!isZip) {
    message.error('请选择zip文件!');
    this.shpFile =[]; //你那里的这个如果是数组就置为空
    return false;
}                
    this.shpFile = [file];
    return false; // 若返回 false 或者返回 Promise 且被 reject,则停止上传。 
    // 如果你是自己实现上传功能就要return false 反之不需要
},

这个只是方便用户选择文件,不是用来限制上传文件的,需要自己另行判断

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏