axios上傳操作詳解

一、 axios上傳文件終止

在實際項目中，時常會遇到上傳文件需要中止的情況。這時，axios提供了一個很便捷的方法——cancelToken。我們可以通過設置cancelToken來實現中止上傳文件的功能。具體實現代碼如下：

// 創建一個cancelToken對象
let cancel;
const source = axios.CancelToken.source();

axios({
    url: 'http://www.xxxxx.com/api/upload',
    method: 'post',
    data: formData,
    headers: {
        "Content-Type": "multipart/form-data"
    },
    cancelToken: source.token   // 將cancelToken關聯到請求中
})
.then(res => {
    console.log('上傳成功：', res);
})
.catch(err => {
    if (axios.isCancel(error)) {
        console.log('上傳已取消：', err.message);
    } else {
        console.log('上傳失敗：', err);
    }
});

// 中止上傳文件的方法
cancel = () => {
    source.cancel('Operation canceled by the user.');  // 給source對象賦值一個取消提示
};

在上述代碼中，我們首先創建了一個cancelToken對象source，並且將其關聯到請求中的cancelToken屬性中。在請求中，axios會自動處理中止請求的操作。同時，在最後我們定義了一個函數cancel，相當於暴露出來給外部用戶進行調用。

二、axios上傳文件到egg

在使用axios日常開發過程中，與後端的交互是必不可少的。一般情況下，我們的後端框架都是基於nodejs的。通常，我們會使用egg.js這個優秀的後端框架。而axios也提供了非常簡單的用法來實現如何上傳文件到egg框架。

下面是具體的實現代碼：

const uploadFile = (params) => {
    let formData = new FormData();
    formData.append('file', params.file);
  
    let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
    }
  
    return axios.post(`http://localhost:7001/api/upload`, formData, config);
}

在上面的代碼中，我們首先定義了一個函數uploadFile來上傳文件。在這個函數體中，我們創建了一個FormData對象，並且往其中添加了一個指定的文件。接著，我們設置了一個headers選項為formdata格式，並通過axios.post請求將formData發送到egg伺服器中。

三、axios上傳圖片至伺服器

在項目中，我們需要經常上傳圖片。而axios則可以非常方便地實現上傳圖片至伺服器的功能。以下是具體的實現代碼：

let formData = new FormData();
formData.append('file', file);

axios({
    url: 'http://www.xxxxx.com/api/upload/image',
    method: 'post',
    data: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(res => {
    console.log('上傳圖片成功：', res);
})
.catch(err => {
    console.log('上傳圖片失敗：', err);
});

在上述代碼中，我們同樣創建了一個FormData對象，並且通過axios.post請求將formData發送到後端伺服器中。

四、axios上傳了一般如何終止

當我們在發出一個axios請求後，想要中止這個請求，可以通過cancelToken來實現任務的中止，並且通過配置請求取消回調函數來給出提示信息。

let cancel;
const source = axios.CancelToken.source();

axios({
    url: 'http://www.xxxxx.com/api/data',
    method: 'post',
    data: data,
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    cancelToken: source.token
})
.then(res => {
    console.log('數據上傳成功：', res);
})
.catch(error => {
    if (axios.isCancel(error)) {
        console.log('請求已被取消的提示信息：', error);
    } else {
        console.log('數據上傳失敗：', error);
    }
});

// 中止請求
cancel = () => {
    source.cancel('取消請求操作');
}

五、axios傳遞參數

在axios中，我們可以通過params屬性來向後端服務端傳遞參數。比如，對接後端介面時，我們需要將一些常量參數帶上，我們可以在前端使用params實現。下面是具體的實現代碼：

let params = {
    'key1': 'value1',
    'key2': 'value2'
}

axios({
    url: 'http://www.xxxxx.com/api/data',
    method: 'get',
    params: params
})
.then(res => {
    console.log('獲取數據成功：', res);
})
.catch(err => {
    console.log('獲取數據失敗：'， err);
})

六、Axios官網

為了更加全面地學習和使用axios，我們可以去axios的官網（https://github.com/axios/axios）了解更多詳細的信息。我們可以在GitHub上找到相關的使用demo以及其他開發者的意見和建議。

七、美國Axios網站選取

作為一個開發人員，我們也需要關注海外的技術文章及文獻，以擴展我們的視野。下面選取美國Axios網站上關於axios上傳的部分內容：

1. How to upload files with axios – Medium
2. Axios file upload – jQuery + PHP – Stack Overflow

這些網站上的文章可以提供給我們一個更加全面的認識和應用axios上傳的知識。

結語

在實際的開發過程中，使用axios上傳文件、圖片和數據，是非常常見和必要的操作。相比傳統的XMLHttpRequest請求，axios減少了很多不必要的代碼，並且支持Promise API，使得代碼更加易於維護。同時，其實現邏輯清晰，使用也非常方便。上述的七個方面，可以讓讀者在axios上傳操作上獲得更加全面的知識。