vue实现文件上传功能

下面我将详细介绍如何使用Vue实现文件上传功能，过程中将包含两个示例。

一、准备工作

1. 安装依赖

首先需要安装axios和qs这两个依赖。axios是一个基于promise的HTTP请求库，可以用于浏览器和Node.js，而qs是用于解析和格式化查询字符串的工具。

npm install axios qs

2. 配置请求头

当我们进行文件上传时，需要将请求头的Content-Type设置为multipart/form-data。这样服务器就知道这个请求包含了文件。我们可以使用axios的defaults.headers来设置全局请求头。

import axios from 'axios';

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

二、实现方式

1. 使用原生表单上传文件

<template>
  <div>
    <form ref="form" enctype="multipart/form-data">
      <input type="file" name="file" @change="onFileChange">
      <button type="button" @click="onSubmit">上传</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },
    onSubmit() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/upload', formData)
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.error(err.response.data);
        });
    }
  }
};
</script>

以上代码中，我们首先创建了一个form表单，设置了其enctype属性为multipart/form-data，这样在选择文件上传时，就会把文件的二进制数据包含在请求体的表单数据中。我们监听了<input>标签的change事件，将选择的文件保存在组件的file变量中。当用户点击上传按钮时，使用FormData对象将文件打包成表单数据并发送请求。

2. 使用第三方库上传文件

除了上面提到的原生表单方式，还可以使用一些第三方库来更加方便地上传文件，如vue-upload-component。

首先需要安装vue-upload-component：

npm install vue-upload-component

<template>
  <div>
    <file-upload
      ref="upload"
      class="file-upload"
      :max-size="1024 * 1024 * 5"
      :extensions="['jpg', 'jpeg', 'png']"
      @input-file="onInputFile"
    >
      <button type="button">选择文件</button>
    </file-upload>
    <button type="button" @click="onSubmit">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    onInputFile(file) {
      this.file = file;
    },
    onSubmit() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/upload', formData)
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.error(err.response.data);
        });
    }
  }
};
</script>

可以看到，使用vue-upload-component上传文件非常简便，只需要添加组件及相关配置即可。在选择文件时，input-file事件会被触发，我们在这里将选择的文件保存在组件的file变量中。之后点击上传按钮时，使用FormData对象将文件打包成表单数据并发送请求。

三、总结

总体来说，使用Vue实现文件上传功能并不是很难。我们可以使用原生表单、第三方库等方式来完成文件上传操作。但无论使用何种方式，都需要注意设置请求头、使用FormData对象打包文件以及捕获错误信息等操作。