前端上传文件限制[宽高，比例，大小]

最新推荐文章于 2025-04-30 13:37:07 发布

原创

最新推荐文章于 2025-04-30 13:37:07 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

该博客详细介绍了在前端实现文件上传时如何进行大小、格式、宽高比例等限制的校验，通过Promise处理异步操作，确保上传的文件符合指定规则，避免异常情况并优化用户体验。

项目场景：

1，上传文件限制

功能作用：

1，防止前端操作上传异常文件
2，限制符合的规则，优化展示模型

功能实现：

1，获取file实例
2，执行校验规则方法

代码如下：

//大小限制
checkFileSize(file, rules) {
   
   
    return new Promise((resolve, reject) => {
   
   
        file.size / 1024 / 1024 > rules ? reject() : resolve()
    }).then(
        () => {
   
   
          return true
        },
        () => {
   
   
			//操作提示
          return Promise.reject()
        }
    )
},
//上传格式限制
checkFileType(file, rules) {
   
   
    return new Promise((resolve, reject) <