文件上传前端做限制——刘金萍

使用element-ui中el-upload组件时

<el-upload
                        :show-file-list="false"
                        class="upload-icon-button"
                        :data="{
                            接口入参
                        }"
                        accept=".png,.jpg,.ico,.jpeg"
                        :before-upload="beforeChangeFavoicon"
                        :on-success="changeFavoicon"
                        :auto-upload="true"
                        action="上传文件接口"
                    >
                    </el-upload>

1.首先可以使用accept，让用户首先看到规定类型，此方法用户可以更改选择框中右下角类型选择其他类型文件。
2.在:before-upload=”beforeChangeFavoicon”方法中获得file.type做限制。

beforeChangeFavoicon(file) {
            this.uploadIconLoading = true;
            const isJPG = file.type === "image/jpg" || file.type === "image/png" || file.type === "image/x-icon" || file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传图片只支持是 JPG、PNG、JPEG、X-ICO 格式!");
                this.uploadIconLoading = false;
            }
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 2MB!");
                this.uploadIconLoading = false;
            }
            return isJPG && isLt2M;
        },

 // 上传前验证
 beforeAvatarUpload(file) {
   let Xls = file.name.split('.'); 
   if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
     return file
   }else {
     this.$message.error('上传文件只能是 xls/xlsx 格式!')
     return false
   }
 },