JavaScript 上传文件限制参数案例详解
作者：箴水_Protaos
这篇文章主要介绍了JavaScript 上传文件限制参数案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
项目场景：
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) => {
rules && rules.includes(file.type) ? resolve() : reject()
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
},
//宽高比例(图片)
checkImageWH(file, rules) {
const _this = this
return new Promise((resolve, reject) => {
//读取文件
const filereader = new FileReader()
filereader.readAsDataURL(file)
filereader.onload = e => {
const src = e.target.result
const image = new Image()
image.onload = function() {
//分析数据，对数据进行判断 符合规则 resolve()
}
image.onerror = reject
image.src = src
}
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
},
//宽高比例(视频)
checkVideoWH(file, rules) {
return new Promise(function(resolve, reject) {
var url = URL.createObjectURL(file)
var video = document.createElement('video')
video.onloadedmetadata = evt => {
URL.revokeObjectURL(url)
//分析数据，对数据进行判断 符合规则 resolve()
}
video.src = url
video.load() // fetches metadata
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
}
实际调用
//获取file实例
Screen(){
//获取权限规则
const { filesSize, filesFormat, fileLimit} = this // 文件大小、文件类型、图片/视频宽高限制
//传参判断
const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
const isFileType = filesFormat ? await this.checkFileType(file, filesFormat) : true
//图片素材
if (fileLimit && fileLimit.type * 1 === 1) {
const isImageLimit = fileLimit? await this.checkImageWH(file, fileLimit) : true
//输出结果
return isFileSize && isFileType && isImageLimit
} else if (fileLimit&& fileLimit.type * 1 === 2) {
//视频素材
const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
//输出结果
return isFileSize && isFileType && isVideoLimit
} else {
//不限制
//输出结果
return isFileSize && isFileType
}
}
内容总结：
1，获取实例
2，执行方法。
到此这篇关于JavaScript 上传文件限制参数案例详解的文章就介绍到这了,更多相关js 上传文件限制参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！