JavaScript获取上传文件相关信息示例详解

这篇文章主要为大家介绍了JavaScript获取上传文件相关信息示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前题场景

在开发过程中，文件上传是再熟悉不过的场景了，但是根据实际使用情况对上传文件的限制又各有不同。需要对本地上传文件进行相应的限制处理，防止不符合规则或者要求的文件上传到云存储中，从而造成云盘资源空间浪费。

与此同时，也在给客户端使用文件信息之前做了一次数据过滤处理，减少客户端对文件资源的处理和校验。

处理方式

因为客户端使用后台管理上传的图片文件和音频文件时，为了优化展示效果和加载的速度，所以在后台管理系统上传处希望依据图片文件的宽高比例对文件大小做下相应的限制；

同时对上传的音频文件要依据音频文件的时长做些相应的限制，比如：在指定时长范围内的音频文件的文件大小做下对应的限制，符合要求文件大小的文件可以上传到云服务器，不符合要求的就要进行相应的文件上传拦截，并作出对应的提示，以便于使用者在操作上传文件时候可以依据指定的提示去筛选出符合要求的文件。

图片文件

通过创建图片文件对象来加载文件流的方式来获取图片文件的宽度和高度。

⚠️有些情况下需要单独处理，把其他格式类型的文件通过强制修改后缀名的方式来达到转换文件的目的，此种方式最终会通过“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.src = reader.result; // 图片加载成功 imageEl.onload = () => { let imgWH = { with: imageEl.width, height: imageEl.height }; return resolve(imgWH); }; // 图片加载失败 imageEl.onerror = () => { return reject(null); }; }; // 文件对象加载失败 reader.onerror = () => { return reject(null); }; }); };

音频文件

通过创建音频文件流的方式来获取音频文件的时长「视频文件流同样适用此方法」

⚠️有些情况下就是那其他格式类型的文件通过转换或者强制修改文件后缀名的方式来达到转换文件类型的目的，此方法在测试环节可能会出现，但是在平时使用过程过出现的概率不是很大，但是防止粗心的人或者其他用意的人采用此种方式，因此需要对失败事件“audioEl.onerror”进行监听，来优化判断逻辑，减少问题出现。

/** * @description 获取音频文件时长 * @param {Object} file 音频文件对象 * @return {Number}  duration 时长 *  */ const getAudioDuration = file => { return new Promise((resolve, reject) => { // 创建URL对象 const audioURL = URL.createObjectURL(file); // 创建audio对象 const audioEl = new Audio(audioURL); // 元数据加载触发事件 audioEl.onloadedmetadata = () => { // 读取文件音频时长 const duration = audioEl.duration; return resolve(duration); }; // 元数据加载失败 audioEl.onerror = () => { return reject(null); }; }); };

判断处理

此处只是做了基础的逻辑判断，后续若有其他需求，可以根据自身实际需求场景进行相应的修改；

此处封装的两个异步函数方法“获取图片文件的宽度和高度”和“获取音频文件的时长”，对基础格式的校验比较简单，后续可以根据实际情况做修改。

若是采用获取文件流的方式来获取想要的文件类型信息，建议采用“异步”的方式来加载文件。

/** * @description 判断文件类型 * @param {Object} file 文件对象 * @return {Object} file *  */ const checkFile = async file => { // 获取文件大小 const fileSize = file.size || 0; // 获取文件类型 const fileType = file.type; let isImage = false; let isAudio = false; // 判断文件类型 if (fileType.includes("image/")) { // 图片文件 if (fileType === "image/png") { // png图片 isImage = true; } } else if (fileType.includes("audio/")) { // 音频文件 if (fileType.includes("audio/mpeg")) { // mp3 isAudio = true; } } // 判断图片 if (isImage) { let imgRes = await getImageRadio(file); } // 判断音频 else if (isAudio) { let audioRes = await getAudioDuration(file); } // 其他格式 else { // 其他格式文件 } };