vue 文件上传

Vue文件上传功能实现概述

在前端开发中，文件上传功能是一个非常实用的功能，在Vue项目中，我们可以通过HTML5的File API和axios等库来实现文件上传功能，本文将详细介绍如何在Vue项目中实现文件上传功能，并提供相关问题的解答。

准备工作

1、安装axios库

在使用axios之前，需要先安装axios库，可以通过npm或者yarn进行安装：

npm install axios

或

yarn add axios

2、创建一个Vue组件

在Vue项目中，我们需要创建一个Vue组件来实现文件上传功能，以下是一个简单的Vue组件示例：

<template>
  <div>
    <input type="file" @change="uploadFile" />
  </div>
</template>
<script>
import axios from 'axios';
export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/api/upload', formData, {
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          console.log(percentCompleted);
        },
      });
    },
  },
};
</script>

实现原理及代码解析

1、在模板中添加一个文件输入框，并监听其change事件，当用户选择文件后，触发change事件。

2、在methods中定义uploadFile方法，该方法接收一个event参数，从event中获取用户选择的文件。

3、创建一个FormData对象，并将文件添加到FormData中，FormData对象可以用于发送表单数据，支持键值对和文件类型数据。

4、使用axios发送POST请求，将FormData对象作为请求体发送到服务器，设置onUploadProgress回调函数，用于监听文件上传进度，当文件上传进度发生变化时，更新进度条。

相关问题与解答

1、如何限制最多只能上传两个文件？

答：在input标签中添加multiple属性即可允许多文件选择，然后在uploadFile方法中检查formData的length属性，确保只上传两个文件。

<input type="file" multiple @change="uploadFiles" />

methods: {
  uploadFiles(event) {
    this.$refs.fileInput.files = event.target.files; // 只保留最新的两个文件
    const formData = new FormData(); // 清空之前的文件数据
    for (let i = 0; i < this.$refs.fileInput.files.length; i++) {
      formData.append('file', this.$refs.fileInput.files[i]); // 将最新的两个文件添加到formData中
    }
    ...其他代码不变...
  },
},