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 {
      // 其他格式文件
    }
};

分析总结

通过此次文件上传处理分析，可以依据文件后缀名判断指定的文件格式类型，也可以通过上传的文件对象“file.type”来获取文件类型。

两种方式都可以处理文件类型，早期开发，主要是通过判断文件后缀名的方式来区分文件类型，有些时候命名格式有些不规范，处理起相对来说容易出现差错。

此次判断采用的文件file对象的方式来判断文件类型。相对来说，文件后缀名方式判断文件类型比文件对象“file.type”方式获取文件类型来说稍微简单点，也容易判断些，但是在明明不规范的情况下容易产生问题。

总之来说，两种判断方式各有利弊，在使用过程中，可以根据自己的实际开发情况来决定采用哪种方式。

以上就是JavaScript获取上传文件相关信息示例详解的详细内容，更多关于JavaScript获取上传文件信息的资料请关注其它相关文章！

原文地址：https://juejin.cn/post/7135825590493380615