Vue实现附件上传功能

如何使用Vue实现附件上传功能？下面是一个完整的攻略：

1. 安装依赖

在使用Vue实现附件上传功能之前，需要安装和配置相关依赖。

首先，在项目中安装axios这个库。axios是一个HTTP客户端，主要用于处理跨域请求和在浏览器和Node.js中发送HTTP请求。

在命令行中输入以下命令来安装axios：

npm install axios

然后，在项目中安装vue-upload-component这个库。vue-upload-component是Vue文件上传组件，它提供了一种简单但功能强大的方法来上传文件。

在命令行中输入以下命令来安装vue-upload-component：

npm install vue-upload-component

2. 创建上传组件

在Vue中创建一个上传组件，代码如下：

<template>
  <div>
    <h2>文件上传</h2>
    <vue-upload
      ref="upload"
      :url="uploadUrl"
      :accept="fileType"
      :max-size="maxSize"
      :headers="headers"
      :data="formData"
      @input-filter="inputFilter"
      @file-added="fileAdded"
      @upload-progress="uploadProgress"
      @render="render"
    >
      <div>{{ message }}</div>
    </vue-upload>
  </div>
</template>

<script>
import VueUploadComponent from "vue-upload-component";
import axios from "axios";

export default {
  name: "Upload",
  components: {
    VueUploadComponent,
  },
  data() {
    return {
      uploadUrl: "",
      fileType: "",
      maxSize: "",
      headers: {},
      formData: {},
      message: "选择一个文件进行上传",
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      // 新文件的大小是否超过maxSize
      if (this.maxSize && newFile.size > this.maxSize) {
        this.message = "文件大小超过限制";
        prevent();
      }
      // 新文件的类型是否符合fileType
      if (this.fileType && !newFile.type.match(this.fileType)) {
        this.message = "文件类型不符合要求";
        prevent();
      }
    },
    fileAdded(file) {
      this.formData = new FormData();
      this.formData.append("file", file);
      this.formData.append("name", file.name);
    },
    uploadProgress(progress) {
      this.message = `上传进度: ${progress.percent}%`;
    },
    render(res) {
      this.message = "上传成功";
      console.log(res);
    },
  },
};
</script>

这个上传组件包含以下功能：

限制上传文件的大小和类型
显示上传进度
显示上传结果（上传成功或失败）

3. 配置上传组件

在Vue中配置上传组件，代码如下：

<template>
  <div>
    <h2>文件上传</h2>
    <vue-upload
      ref="upload"
      :url="uploadUrl"
      :accept="fileType"
      :max-size="maxSize"
      :headers="headers"
      :data="formData"
      @input-filter="inputFilter"
      @file-added="fileAdded"
      @upload-progress="uploadProgress"
      @render="render"
    >
      <div>{{ message }}</div>
    </vue-upload>
  </div>
</template>

<script>
import VueUploadComponent from "vue-upload-component";
import axios from "axios";

export default {
  name: "Upload",
  components: {
    VueUploadComponent,
  },
  data() {
    return {
      uploadUrl: "",
      fileType: "",
      maxSize: "",
      headers: {},
      formData: {},
      message: "选择一个文件进行上传",
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      // 新文件的大小是否超过maxSize
      if (this.maxSize && newFile.size > this.maxSize) {
        this.message = "文件大小超过限制";
        prevent();
      }
      // 新文件的类型是否符合fileType
      if (this.fileType && !newFile.type.match(this.fileType)) {
        this.message = "文件类型不符合要求";
        prevent();
      }
    },
    fileAdded(file) {
      this.formData = new FormData();
      this.formData.append("file", file);
      this.formData.append("name", file.name);
    },
    uploadProgress(progress) {
      this.message = `上传进度: ${progress.percent}%`;
    },
    render(res) {
      this.message = "上传成功";
      console.log(res);
    },
  },
  mounted() {
    this.uploadUrl = "http://localhost:3000/upload";
    this.fileType = "image/*"; // 限制上传类型为图片类型
    this.maxSize = 1024 * 1024 * 2; // 限制上传文件大小为2MB
    this.headers = {
      "Content-Type": "multipart/form-data",
    };
  },
};
</script>

在mounted生命周期钩子中配置上传组件的相关参数：

uploadUrl：上传文件的地址
fileType：上传文件的类型
maxSize：上传文件的最大大小
headers：请求头信息，需要设置Content-Type为multipart/form-data。

示例

示例一：上传图片文件

在模板代码中，我们将fileType限制为image/*，这样我们就能限制用户只能上传图片文件。现在我们来执行下面的代码上传一张图片文件：

<Upload />

当文件上传成功后，上传组件会在控制台中打印出上传结果。

示例二：上传PDF文件

我们现在将fileType限制为application/pdf，这样我们将限制用户只能上传PDF文件。现在我们来执行下面的代码上传一个PDF文件：

<Upload />