在前后端分離的開(kāi)發(fā)中，經(jīng)常需要前端向后端發(fā)送附件、圖片、視頻等文件。Vue作為一款流行的前端框架，也提供了方便的方式來(lái)發(fā)送文件。

首先，我們需要在Vue項(xiàng)目中安裝Axios。Axios是一個(gè)基于Promise的HTTP客戶端，用于發(fā)送異步請(qǐng)求。可以使用npm包管理器安裝，具體命令如下：

npm install axios --save

在組件中引入Axios：

import axios from 'axios'

接下來(lái)，我們來(lái)看一下如何發(fā)送文件。我們可以使用FormData來(lái)構(gòu)造一個(gè)HTTP POST請(qǐng)求，最終將請(qǐng)求發(fā)送給后端。以下是一個(gè)發(fā)送文件的例子：

uploadFile() {
let formData = new FormData();
formData.append('file', this.selectedFile, this.selectedFile.name);
axios.post('http://example.com/upload', formData)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}

在這個(gè)例子中，我們首先創(chuàng)建了一個(gè)FormData對(duì)象，用于構(gòu)造請(qǐng)求。然后給這個(gè)對(duì)象添加了一個(gè)file字段，該字段的值為一個(gè)文件對(duì)象。selectedFile是一個(gè)在組件中定義的變量，表示用戶選擇上傳的文件。最后，我們調(diào)用了Axios的post方法來(lái)發(fā)送請(qǐng)求。

需要注意的是，我們?cè)贔ormData對(duì)象的append方法中傳入的第二個(gè)參數(shù)必須是Blob或File對(duì)象。Blob對(duì)象代表一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。File對(duì)象則代表一個(gè)文件，包含有關(guān)文件的元數(shù)據(jù)，如文件名、大小、類型等。我們需要使用input標(biāo)簽的type屬性為file來(lái)創(chuàng)建一個(gè)文件選擇器，讓用戶可以從本地文件系統(tǒng)中選擇文件。

以下是創(chuàng)建文件選擇器的例子：

在Vue組件中，我們可以使用onFileSelected方法來(lái)處理用戶選擇文件的事件：

onFileSelected(event) {
this.selectedFile = event.target.files[0];
}

在這個(gè)方法中，我們從event.target.files數(shù)組中獲取第一個(gè)文件對(duì)象，并賦值給組件中的selectedFile變量。

在發(fā)送文件之前，我們需要將文件預(yù)覽在頁(yè)面上。

以下是一個(gè)預(yù)覽圖片的例子：

preview() {
let reader = new FileReader();
reader.onload = () =>{
this.imagePreview = reader.result;
}
reader.readAsDataURL(this.selectedFile);
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)FileReader對(duì)象，用于讀取文件內(nèi)容。我們同時(shí)給這個(gè)對(duì)象的onload方法綁定一個(gè)回調(diào)函數(shù)，當(dāng)文件讀取完成后，執(zhí)行該函數(shù)。在該函數(shù)中，我們將讀取到的文件內(nèi)容賦值給組件中的imagePreview變量。readAsDataURL方法用于將文件讀取為Data URL格式，該格式以base64編碼的字符串形式表示文件內(nèi)容。

需要注意的是，由于圖片預(yù)覽需要異步讀取文件內(nèi)容，因此我們需要將預(yù)覽操作放在文件選擇之后的某個(gè)時(shí)間點(diǎn)。可以使用Vue的watch屬性來(lái)監(jiān)聽(tīng)selectedFile變量的變化，并自動(dòng)更新預(yù)覽。

以下是監(jiān)聽(tīng)selectedFile變量的示例：

watch: {
selectedFile: function () {
this.preview();
}
}

以上就是使用Vue發(fā)送文件的方法。需要注意的是，如果要發(fā)送大文件或多個(gè)文件，建議使用文件分塊上傳的方式，以避免超時(shí)或內(nèi)存溢出等問(wèn)題。