Vue選擇文件詳解

一、Vue中的文件選擇

在前端開發中，經常需要上傳文件，所以文件選擇功能就很必要。在Vue中，有幾種方式來實現文件選擇。

1. input標籤

<input type="file" @change="handleFileUpload">

methods: {
  handleFileUpload(e) {
    const file = e.target.files[0];
    console.log(file);
  },
}

使用input標籤可以很方便地實現文件選擇功能。通過監聽change事件，可以獲取到用戶選擇的文件。這種方式的缺點是，不能自定義按鈕的樣式。

2. Vue組件庫

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="onSuccess">
    <el-button size="small" type="primary">點擊上傳</el-button>
  </el-upload>
</template>

methods: {
  onSuccess(response, file, fileList) {
    console.log(response, file, fileList);
  },
}

Vue的組件庫中，常常包含了文件選擇功能。例如ElementUI的el-upload組件。通過配置action屬性，可以指定文件上傳的url，通過on-success事件，可以獲取到上傳成功後的響應數據。

二、文件的讀取和處理

文件選擇之後，我們還需要讀取文件內容，或者對文件進行處理。以下是幾種實現方式。

1. FileReader對象

<input type="file" @change="handleFileUpload">

methods: {
  handleFileUpload(e) {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0]);
    fileReader.onload = e => {
      console.log(e.target.result);
    };
  },
}

FileReader對象可以讀取文件內容。通過調用readAsText方法，可以讀取文本文件的內容。讀取完成後，通過onload事件獲取到文件的內容。

2. 文件上傳和處理庫

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="onSuccess"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">點擊上傳</el-button>
  </el-upload>
</template>

<script>
import XLSX from 'xlsx';

export default {
  methods: {
    beforeUpload(file) {
      const fileType = file.type;
      const isExcel = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].indexOf(fileType) !== -1;
      const size = file.size / 1024 / 1024;
      if (!isExcel || size > 5) {
        this.$message.error('只支持上傳 smaller than 5MB 的Excel文件');
        return false;
      }
      const fileReader = new FileReader();
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const binaryString = e.target.result;
        const workbook = XLSX.read(binaryString, { type: 'binary' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        console.log(data);
      };
      return false;
    },
    onSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
  },
};
</script>

對於特定類型的文件，我們可能需要進行一些特殊處理，例如讀取Excel文件。這時可以使用一些文件上傳和處理庫，如xlsx、pdfjs等。上述代碼中，使用了xlsx庫，讀取Excel文件的具體過程如下：

1. 使用FileReader對象讀取文件內容，讀取方式為二進位字元串。
2. 使用xlsx庫的read方法，將二進位字元串轉換成workbook對象。
3. 獲取到workbook對象中的worksheet，使用sheet_to_json方法獲取到文件內容。

三、文件上傳

文件選擇和處理之後，還需要將文件上傳到伺服器。以下是文件上傳的幾種實現方式。

1. 原生XMLHttpRequest對象

methods: {
  handleFileUpload(e) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.onload = () => {
      console.log(xhr.responseText);
    };
    const formData = new FormData();
    formData.append('file', e.target.files[0]);
    xhr.send(formData);
  },
}

使用原生XMLHttpRequest對象可以很方便地上傳文件。通過FormData對象，可以將文件放入請求體中，發送到伺服器。使用onload方法監聽非同步上傳完成的事件。

2. axios

methods: {
  handleFileUpload(e) {
    const formData = new FormData();
    formData.append('file', e.target.files[0]);
    axios.post('/upload', formData)
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  },
}

axios是一款流行的HTTP請求庫，也可以用於文件上傳。使用FormData對象將文件放入請求體中，axios會自動將請求頭設置為multipart/form-data類型。

3. Vue組件庫

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="onSuccess">
    <el-button size="small" type="primary">點擊上傳</el-button>
  </el-upload>
</template>

methods: {
  onSuccess(response, file, fileList) {
    console.log(response, file, fileList);
  },
}

Vue的組件庫中，常常包含了文件上傳功能。例如ElementUI的el-upload組件。通過配置action屬性，可以指定文件上傳的url，通過on-success事件，可以獲取到上傳成功後的響應數據。