vue el-upload限制文件大小及类型等基本用法

template 代码

<!-- limit 最大允许上传个数 -->
<!-- accept 限制文件类型 -->
<!-- action 必选参数，上传的地址-->
<el-upload ref="upload" class="upload-demo"
       action="/api/app-device-manager-service-provider/v1/upload/upload-photo-face"
                     :headers="importHeaders"
                     :on-change="handleChange"
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
                     :on-error="handleError"
                     :on-exceed="handleExceed"
                     :show-file-list='false'
                     drag
                     multiple
                     accept="image/png,image/jpg,image/jpeg">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
        <!-- <span>限制单次选择50个文件,且单文件大小不能超过1MB</span> -->
</el-upload>

js代码

// 上传文件之前的钩子 图片大小检验
beforeUpload (file) {
  const isLt2M = file.size / 1024 / 1024 < 1
  if (!isLt2M) {
     const fileItem = {}
     fileItem.message = '[' + file.name + '] 大小超过1MB '
     fileItem.statusCode = 500
     this.fileList.unshift(fileItem)
   }
   return isLt2M
}