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

/**
 * @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);
        };
    });
};

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