美文网首页
表单校验上传图片格式

表单校验上传图片格式

作者: 八妹sss | 来源:发表于2021-03-19 13:55 被阅读0次

1、html限制

<!--所有格式的图片-->
<input type="file" accept="image/*" />
<!--指定图片格式-->
<input  type="file" accept="image/png,image/jpg,image/jpeg" />

2、js限制

// 所有格式的图片
uploadImg (data) {
      let file = data.file
      if (!/^image\//.test(file.type)) {
        return this.$message({
          message: '请上传图片格式文件',
          type: 'warning'
        })
      }
      let size = Math.floor(file.size / 1024)
      if (size > 1024 * 5) {
        this.$message({
          message: '建议使用5MB以内的图片',
          type: 'warning'
        })
        return false
      }
 }
// 部分格式图片
uploadImg (data) {
      let file = data.file
      if (!/\.jpg|\.jpeg$|\.png$/i.test(file.name)) {
        return this.$message({
          message: '建议使用jpg、png格式的图片',
          type: 'warning'
        })
      }
      let size = Math.floor(file.size / 1024)
      if (size > 1024 * 5) {
        return this.$message({
          message: '建议使用5MB以内的图片',
          type: 'warning'
        })
      }
 }

相关文章

网友评论

      本文标题:表单校验上传图片格式

      本文链接:https://www.haomeiwen.com/subject/mwmvcltx.html