beforeupload介紹

在進行文件上傳的過程中，我們經常需要在上傳前進行一些處理，例如驗證文件類型、大小、尺寸等信息。而beforeupload就是一個在文件上傳前的鉤子函數，我們可以在beforeupload裡面進行一系列的操作，例如添加一個異步請求、對文件名進行修改等。本文將從多個方面對beforeupload進行詳細的闡述，希望能夠幫助大家更好地使用beforeupload。

一、beforeupload參數

beforeupload是在文件上傳之前觸發的鉤子函數，我們可以通過beforeupload的參數來獲取上傳的文件信息。beforeupload的參數如下：

/**
 * 上傳文件之前的鉤子函數
 * @param {File} file 當前上傳的文件
 * @param {Array} fileList 已選中的文件列表
 * @param {function} callback 回調函數，用於告訴beforeupload是否要中斷上傳
 * @param {Object} options 配置項
 */
function beforeUpload(file, fileList, callback, options) {}

其中，file表示當前上傳的文件；fileList表示已選中的文件列表；callback是回調函數，我們可以在裡面調用callback(false)來中斷上傳；options是我們在使用beforeupload時傳入的配置項。

通常情況下，我們最常用的是file這個參數，我們可以在裡面獲取到上傳文件的信息，例如文件名、大小、類型等。下面是一個例子。

function beforeUpload(file, fileList, callback, options) {
  console.log('當前上傳的文件為：', file.name)
}

二、beforeupload限制圖片尺寸

在進行圖片上傳的時候，我們經常需要對圖片進行尺寸的限制，以避免一些不必要的問題，例如圖片過大等。我們可以在beforeupload裡面進行圖片的尺寸檢查，並且在檢查不通過的時候中斷上傳。下面是一個例子：

function beforeUpload(file, fileList, callback, options) {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;
  const img = new Image();
  let valid = true;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    img.src = e.target.result;
  }
  img.onload = function () {
    if (!isJPG) {
      callback(false);
      alert('請上傳jpg格式的圖片！');
      valid = false;
    } else if (!isLt2M) {
      callback(false);
      alert('圖片大小不能超過2MB！');
      valid = false;
    } else if (img.width  3000 || img.height  3000) {
      callback(false);
      alert('圖片尺寸不符合要求，請上傳500*500到3000*3000的圖片！');
      valid = false;
    }
    if (valid) {
      callback(true);
    }
  }
}

在上面的代碼中，我們首先判斷圖片的類型和大小是否符合要求，接着創建一個Image對象，用來獲取圖片的寬高信息。當圖片信息獲取完成後，我們再根據圖片的尺寸來進行判斷，如果尺寸不符合要求，則調用callback(false)來中斷上傳，否則調用callback(true)來繼續上傳。

三、beforeupload裡面加異步請求

有時候，在進行文件上傳的時候，我們需要把一些上傳後的信息上傳到後台數據庫，或者將上傳的文件傳給某個接口進行分析處理。此時，我們可以在beforeupload裡面增加一個異步請求，來實現這個功能。下面是一個例子：

function beforeUpload(file, fileList, callback, options) {
  const formData = new FormData();
  formData.append('file', file);
  axios.post('http://localhost:3000/upload', formData).then((res) => {
    console.log('上傳成功！');
    callback(true);
  }).catch((err) => {
    console.log('上傳失敗！');
    callback(false);
  })
}

在上面的代碼中，我們使用了axios這個庫來進行異步請求。我們將上傳的文件通過FormData的方式儲存起來，再通過axios.post()方法將數據上傳到服務器。當上傳成功後，我們調用callback(true)來繼續上傳，否則調用callback(false)來中斷上傳。

四、beforeupload裡面發請求

在某些情況下，在進行文件上傳之前，我們需要根據一些參數，來向後台發出一些請求，以獲取一些上傳前所需的信息。下面是一個例子：

function beforeUpload(file, fileList, callback, options) {
  const url = 'http://localhost:3000/getUploadInfo';
  axios.get(url, {
    params: {
      filename: file.name,
      size: file.size,
      type: file.type
    }
  }).then((res) => {
    if (res.code === 0) {
      // 獲取到後台信息並進行處理
      callback(true);
    } else {
      callback(false);
      alert('獲取上傳信息失敗！');
    }
  }).catch((err) => {
    console.log('請求失敗：', err);
    callback(false);
    alert('請求失敗，請檢查網絡！');
  })
}

在上面的代碼中，我們使用了axios這個庫來進行異步請求。我們將需要上傳的文件的信息通過get的方式傳遞給後台，以獲取上傳前所需的信息。當獲取信息成功後，我們調用callback(true)來繼續上傳，否則調用callback(false)來中斷上傳。

五、beforeupload不支持老ie

需要注意的是，beforeupload這個函數只是在現代瀏覽器中支持的，在老的IE瀏覽器中是不支持的。這意味着，在開發過程中，我們需要根據不同的瀏覽器來選擇不同的上傳方式，以確保上傳的正常進行。下面是一個例子：

  const ua = window.navigator.userAgent;
  if (/MSIE|Trident/.test(ua)) {
    // 使用IE上傳方式
  } else {
    // 使用beforeupload上傳方式
  }

在上面的代碼中，我們可以通過window.navigator.userAgent來獲取當前瀏覽器的用戶代理字符串，判斷當前是否為IE瀏覽器，進而選擇不同的上傳方式。

六、beforeupload修改文件名

有些時候，我們需要對上傳的文件名進行一些修改，例如去掉一些特殊字符或加上一些前綴後綴等。在beforeupload中，我們可以很輕鬆地對文件名進行修改。下面是一個例子：

function beforeUpload(file, fileList, callback, options) {
  const newFilename = 'filename_' + new Date().getTime() + '_' + Math.random().toString(36).substr(2) + '.' + file.name.split('.').pop();
  file.name = newFilename;
  callback(true);
}

在上面的代碼中，我們首先生成了一個新的文件名，例如：filename_1618529752764_wijgoktf.jpg，我們將這個新的文件名賦值給了file.name，這樣，在文件上傳的時候，上傳的文件名就被修改了。最後調用callback(true)來繼續上傳。

七、beforeupload antd

在Ant Design的Upload組件中，也提供了beforeupload這個函數，我們可以使用它來進行上傳前的處理。下面是一個例子：

  function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  }

在Ant Design的Upload組件中，我們可以直接將beforeupload這個函數傳遞給beforeUpload參數即可。在這個函數中，我們進行了圖片類型和大小的判斷，如果不符合要求，則給出相應信息，並返回false，否則返回true來繼續上傳。

八、beforeunload不觸發選取

需要注意的是，在beforeunload事件中，是無法觸發文件選擇的，因此，在進行文件上傳的過程中，盡量不要使用beforeunload事件。而推薦使用beforeupload事件，通過beforeupload事件來進行上傳前的處理。