快捷導(dǎo)航

JavaScript獲取上傳文件相關(guān)信息示例詳解

更新時(shí)間：2022年08月26日 09:11:24 作者：下落香樟樹

這篇文章主要為大家介紹了JavaScript獲取上傳文件相關(guān)信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前題場景

在開發(fā)過程中，文件上傳是再熟悉不過的場景了，但是根據(jù)實(shí)際使用情況對(duì)上傳文件的限制又各有不同。需要對(duì)本地上傳文件進(jìn)行相應(yīng)的限制處理，防止不符合規(guī)則或者要求的文件上傳到云存儲(chǔ)中，從而造成云盤資源空間浪費(fèi)。

與此同時(shí)，也在給客戶端使用文件信息之前做了一次數(shù)據(jù)過濾處理，減少客戶端對(duì)文件資源的處理和校驗(yàn)。

處理方式

因?yàn)榭蛻舳耸褂煤笈_(tái)管理上傳的圖片文件和音頻文件時(shí)，為了優(yōu)化展示效果和加載的速度，所以在后臺(tái)管理系統(tǒng)上傳處希望依據(jù)圖片文件的寬高比例對(duì)文件大小做下相應(yīng)的限制；

同時(shí)對(duì)上傳的音頻文件要依據(jù)音頻文件的時(shí)長做些相應(yīng)的限制，比如：在指定時(shí)長范圍內(nèi)的音頻文件的文件大小做下對(duì)應(yīng)的限制，符合要求文件大小的文件可以上傳到云服務(wù)器，不符合要求的就要進(jìn)行相應(yīng)的文件上傳攔截，并作出對(duì)應(yīng)的提示，以便于使用者在操作上傳文件時(shí)候可以依據(jù)指定的提示去篩選出符合要求的文件。

圖片文件

通過創(chuàng)建圖片文件對(duì)象來加載文件流的方式來獲取圖片文件的寬度和高度。

??有些情況下需要單獨(dú)處理，把其他格式類型的文件通過強(qiáng)制修改后綴名的方式來達(dá)到轉(zhuǎn)換文件的目的，此種方式最終會(huì)通過“image.onerror”事件來輸出錯(cuò)誤，在使用過程中可以使用該方法做下攔截處理。

/**
 * @description 獲取圖片寬度和高度
 * @param {Object} file 圖片文件對(duì)象
 * @return {Object} {width: number, height: number} 圖片寬度和高度
 *  */
const getImageRadio = file => {
    return new Promise((resolve, reject) => {
        // 創(chuàng)建讀取文件對(duì)象
        const reader = new FileReader();
        // 讀取文件對(duì)象
        reader.readAsDataURL(file);
        // 文件對(duì)象加載完成
        reader.onload = () => {
            // 創(chuàng)建image對(duì)象
            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);
            };
        };
        // 文件對(duì)象加載失敗
        reader.onerror = () => {
            return reject(null);
        };
    });
};

音頻文件

通過創(chuàng)建音頻文件流的方式來獲取音頻文件的時(shí)長「視頻文件流同樣適用此方法」

??有些情況下就是那其他格式類型的文件通過轉(zhuǎn)換或者強(qiáng)制修改文件后綴名的方式來達(dá)到轉(zhuǎn)換文件類型的目的，此方法在測(cè)試環(huán)節(jié)可能會(huì)出現(xiàn)，但是在平時(shí)使用過程過出現(xiàn)的概率不是很大，但是防止粗心的人或者其他用意的人采用此種方式，因此需要對(duì)失敗事件“audioEl.onerror”進(jìn)行監(jiān)聽，來優(yōu)化判斷邏輯，減少問題出現(xiàn)。

/**
 * @description 獲取音頻文件時(shí)長
 * @param {Object} file 音頻文件對(duì)象
 * @return {Number}  duration 時(shí)長
 *  */
const getAudioDuration = file => {
    return new Promise((resolve, reject) => {
        // 創(chuàng)建URL對(duì)象
        const audioURL = URL.createObjectURL(file);
        // 創(chuàng)建audio對(duì)象
        const audioEl = new Audio(audioURL);
        // 元數(shù)據(jù)加載觸發(fā)事件
        audioEl.onloadedmetadata = () => {
            // 讀取文件音頻時(shí)長
            const duration = audioEl.duration;
            return resolve(duration);
        };
        // 元數(shù)據(jù)加載失敗
        audioEl.onerror = () => {
            return reject(null);
        };
    });
};

判斷處理

此處只是做了基礎(chǔ)的邏輯判斷，后續(xù)若有其他需求，可以根據(jù)自身實(shí)際需求場景進(jìn)行相應(yīng)的修改；

此處封裝的兩個(gè)異步函數(shù)方法“獲取圖片文件的寬度和高度”和“獲取音頻文件的時(shí)長”，對(duì)基礎(chǔ)格式的校驗(yàn)比較簡單，后續(xù)可以根據(jù)實(shí)際情況做修改。

若是采用獲取文件流的方式來獲取想要的文件類型信息，建議采用“異步”的方式來加載文件。

/**
 * @description 判斷文件類型
 * @param {Object} file 文件對(duì)象
 * @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 {
      // 其他格式文件
    }
};