前题场景
在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同。需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费。与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验。
处理方式
因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片文件的宽高比例对文件大小做下相应的限制;同时对上传的音频文件要依据音频文件的时长做些相应的限制,比如:在指定时长范围内的音频文件的文件大小做下对应的限制,符合要求文件大小的文件可以上传到云服务器,不符合要求的就要进行相应的文件上传拦截,并作出对应的提示,以便于使用者在操作上传文件时候可以依据指定的提示去筛选出符合要求的文件。
图片文件
通过创建图片文件对象来加载文件流的方式来获取图片文件的宽度和高度。
⚠️有些情况下需要单独处理,把其他格式类型的文件通过强制修改后缀名的方式来达到转换文件的目的,此种方式最终会通过“image.onerror”事件来输出错误,在使用过程中可以使用该方法做下拦截处理。
/**
* @description 获取图片宽度和高度
* @param {Object} file 图片文件对象
* @return {Object} {width: number, height: number} 图片宽度和高度
* */
const getImageRadio = file => {
return new Promise((resolve, reject) => {
// 创建读取文件对象
const reader = new FileReader();
// 读取文件对象
reader.readAsDataURL(file);
// 文件对象加载完成
reader.onload = () => {
// 创建image对象
const imageEl = new Image();
// 赋值src地址
imageEl