admin端图片上传限制

以下记录是个人开发过程中遇到的问题：

需求：

混合mixins文件：

export default {
    methods:{
        // 图片上传大小限制
        beforePicUpload(file) {
            const imageStr = 'jpg,jpeg,png,gif,bmp';
            const isLt500KB = file.size / 1024  < 500; //上传最小单位：字节b
            const isFm = file.type !== '' && imageStr.indexOf(file.type.replace('image/','')) !== -1;
            console.log(file.type);
            if(!isFm){
                this.$message({
                    type: 'error',
                    message: '目前支持的图片格式为jpg,jpeg,png,gif,bmp',
                    center:true
                })
            }
            if (!isLt500KB) {
                this.$message({
                    type: 'error',
                    message: '上传图片大小不能超过 500KB!',
                    center:true
                })
            }
            return isLt500KB && isFm;
        }
    }
}

main.js中引入全局混合：

//mixins
import  beforePicUpload  from '@/mixins/beforePicUpload'
Vue.mixin(beforePicUpload)

Element中的Upload 上传属性：

Upload 上传

在组件中使用：

<el-upload
      :action="uploadApi"
      :data="dataObj"
      list-type="picture"
      :multiple="false" :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary" style="background-color: #fc6602; border-color: #fc6602">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg,jpeg,png,gif,bmp文件，且不超过500KB</div>
 </el-upload>
 
methods:{
      //图片上传之前
      beforeUpload(file) {
        if (!this.beforePicUpload(file)) {
          // this.$message.error("图片格式不正确,只支持jpg,jpeg,png,gif,bmp类型图片");
          return false;
        }
      }
}

参考：Element中的Upload 上传

图片上传前限制