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事件，可以获取到上传成功后的响应数据。