【vue】elementUI上传图片限制格式

对上传图片进行格式限制

1.对格式进行提示

采用属性before-upload，添加函数

<!-- html（其余属性暂时省略）-->
<el-upload :before-upload="beforeImgUpload">
</el-upload>

/* js*/
beforeImgUpload(file) {
      const isJPG = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      if (!isJPG || !isPNG || !isJPEG) {
        this.$message.warning('图片格式只能为 【jpg】【png】【jpeg】!')
      }
      return isJPG || isPNG || isJPEG
    }

2.直接对选取的文件格式进行限制

采用accept属性,进行限制

<el-upload accept=".jpg, .jpeg, .png, .JPG, .JPEG"></el-upload>

这样，点击上传后，能选的文件格式只有accept所限定的那些

3.所有代码

<el-dialog title="上传文件" :visible.sync="uploadFile" width="30%" :append-to-body='true'>
  <el-upload class="upload-demo" ref="upload" action="" multiple :http-request="httpRequest"
    :on-change="fileChange"
    :file-list="uploadMedicalFileList"
    :auto-upload="false"
    :before-upload="beforeImgUpload"
    accept=".jpg, .jpeg, .png, .JPG, .JPEG"
    >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitFIleUpload(com),uploadFile = false">上传到服务器</el-button>
  </el-upload>
</el-dialog>
    
 /*js*/   
beforeImgUpload(file) {
      const isJPG = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      if (!isJPG || !isPNG || !isJPEG) {
        this.$message.warning('图片格式只能为 【jpg】【png】【jpeg】!')
      }
      return isJPG || isPNG || isJPEG
    }