使用axios上傳文件

一、安裝axios

要使用axios，首先需要在你的項目中安裝axios。你可以使用npm或者yarn進行安裝。使用命令如下：

  npm install axios

  # 或者

  yarn add axios

安裝完成後，在需要使用axios的頁面或組件中引入axios庫文件

  import axios from 'axios'

二、上傳單個文件

上傳單個文件需要使用FormData數據類型,代碼示例如下:

  const formData = new FormData();
  formData.append('file', file);
  axios.post('/api/upload', formData)

  #或者把請求頭的Content-Type設置為multipart/form-data
  const config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  }
  axios.post('/api/upload', formData, config)

上傳單個文件需要創建一個FormData實例，然後使用append方法添加要上傳的文件。將FormData實例傳遞給axios.post函數即可上傳文件。您可以根據需要添加請求頭

三、上傳多個文件

要上傳多個文件，我們需要做的就是在FormData實例中添加多個文件。代碼示例如下：

  const formData = new FormData();
  files.forEach(file => {
    formData.append('files[]', file);
  });
  axios.post('/api/upload', formData);

遍歷要上傳的文件列表，然後將每個文件添加到FormData實例中。在append方法中，使用‘files[]’將所有文件分組傳遞到服務器，而不是單個文件

四、進度條

上傳文件可能需要一些時間，如果想在上傳過程中顯示進度條，可以使用axios提供的progress事件。progress事件包含上傳的進度信息，例如已經上傳的字節數、總字節數和百分比等。代碼示例如下：

  const config = {
    onUploadProgress: function(progressEvent) {
      const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log('上傳進度：', progress);
    }
  };
  axios.post('/api/upload', formData, config);

在config對象中添加onUploadProgress回調函數即可在上傳過程中實時獲取進度信息，您可以根據需要將信息顯示在進度條上

五、錯誤處理

在上傳文件過程中，可能會遇到一些錯誤。為了在出現錯誤時向用戶提供有用的信息，我們需要在catch塊中處理錯誤。axios可以通過捕獲其拋出的異常來處理錯誤。代碼示例如下：

  axios.post('/api/upload', formData).catch(error => console.log(error));

如果上傳文件出錯，axios會在catch塊中拋出一個異常，您可以根據需要將異常信息顯示在頁面上或將其記錄到日誌中