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

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

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

前題場景

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

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

處理方式

因為客戶端使用后臺管理上傳的圖片文件和音頻文件時，為了優(yōu)化展示效果和加載的速度，所以在后臺管理系統(tǒng)上傳處希望依據(jù)圖片文件的寬高比例對文件大小做下相應(yīng)的限制；

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

圖片文件

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

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

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

音頻文件

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

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

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

判斷處理

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

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

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

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