前端实现对上传文件的效验

先看效果,一个比较简单的需求

• 对图片类型的效验

• 对图片大小的效验

• 对图片尺寸的效验

对上传图片的校验基本都是也以上三者为主,我们可以将他封装成一个工具函数,在任何需要限制图片大小的地方调用就完事了

/**
 * 校验图片的合法性
 * @param {Blob} file 文件对象
 * @param {Array} isImage 文件类型
 * @param {Number} isSize 最大占用内存
 * @param {Number} width 图片宽度
 * @param {Number} heigth 图片高度
 */
export function imgVaild(file, isImage, isSize, width, height) {
  const isIMAGE = isImage.includes(file.type)
  const isLt = file.size / 1024 > isSize // file.size 默认单位为直接 所以这里需要%1024转成kb
  const _URL = window.URL || window.webkitURL
  if (!isIMAGE) {
    return Promise.reject('请检查图片类型')
  }
  if (isLt) {
    return Promise.reject('请检查图片大小')
  }
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = function() {
      const valid = img.width === width && img.height === height
      valid ? resolve() : reject()
    }
    img.src = _URL.createObjectURL(file)
  })
    .then(() => {
      return true
    })
    .catch(() => {
      return Promise.reject('图片尺寸不符合')
    })
}
复制代码

使用很简单

根据提示传参数就行了(使用的是element的el-upload组件在before-upload 上传文件前置钩子)

beforeAvatarUpload(file) {
    const isImage = ['image/jpeg', 'image/png']
    const size = 50
    const width = 116
    const height = 35
    const img = imgVaild(file, isImage, size, width, height)
    return img.then(res => {
        console.log(res);
        return Promise.resolve()
    })
        .catch(res => {
        this.$message({
            message: res,
            type: 'error'
        })
        return Promise.reject()
    })
},
复制代码

转载于:https://juejin.im/post/5c9b2333f265da60e73a126f