vue项目中实现多文件上传功能实例代码

下面是“vue项目中实现多文件上传功能实例代码”的完整攻略：

实现思路

在 Vue 项目中实现多文件上传功能，需要联合使用 HTML5 的 FileReader API 和 axios 来实现。实现思路如下：

1. 通过 input 标签接收用户上传的文件。
2. 把文件列表存储到 vue 组件的 data 中，通过 v-for 循环来渲染上传列表。
3. 使用 FileReader 将文件转换为二进制格式并存储到 vue 组件的 data 中。
4. 通过 axios 发送请求，将文件上传到服务器，并处理上传进度和上传结果。

代码实现

首先，在 vue 组件中定义一个 fileList 数组，用于存储用户选择的文件和上传进度：

<template>
  <div>
    <input type="file" multiple @change="handleChange">
    <div v-for="(file, index) in fileList" :key="index">
      {{ file.name }} - {{ file.progress }}%
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleChange(event) {
      // 遍历用户选择的文件列表
      for (let i = 0; i < event.target.files.length; i++) {
        const file = event.target.files[i];
        // 将文件存储到 fileList 数组中
        this.fileList.push({
          name: file.name,
          size: file.size,
          type: file.type,
          progress: 0,
        });

        // 将文件转换为二进制格式并存储到 fileList 数组中
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
          const result = reader.result;
          const item = this.fileList.find(
            item => item.name === file.name && item.size === file.size && item.type === file.type
          );
          item.raw = result.split(',')[1];
        }.bind(this);

        // 发送异步请求，将文件上传到服务器
        const formData = new FormData();
        formData.append('file', file);
        axios.post('/upload', formData, {
          onUploadProgress: progressEvent => {
            const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
            // 更新进度
            this.fileList.find(
              item => item.name === file.name && item.size === file.size && item.type === file.type
            ).progress = progress;
          },
        });
      }
    },
  },
};

其中，handleChange 方法用于响应用户上传文件的事件，遍历用户选择的文件列表，将每个文件存储到 fileList 数组中，并使用 FileReader 将文件转换为二进制格式并存储到 fileList 数组中。同时，将文件上传到服务器，并更新上传进度。

需要注意的是，在处理上传进度时，需要根据文件的名称、大小和类型来查找对应的 fileList 数组中的元素，并更新其进度。

下面是一个示例，展示了如何使用上述代码实现一个多文件上传组件。

示例

在例子中，我们将使用 Element UI 来渲染上传按钮，并使用 Node.js 和 Express 来模拟服务器端：

<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      multiple
      action="/upload"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">上传文件格式为 xls、xlsx、csv、txt</div>
    </el-upload>
  </div>
</template>

<script>
import axios from "axios";

export default {
  methods: {
    handleProgress(event, file, fileList) {
      const uploadItem = this.$refs.upload.$children[0].$refs[file.uid];

      if (uploadItem) {
        uploadItem.currentUpload.progress = (event.loaded / event.total * 100).toFixed(2);
      }
    },
    handleSuccess(response, file, fileList) {
      const uploadItem = this.$refs.upload.$children[0].$refs[file.uid];

      if (uploadItem) {
        uploadItem.currentUpload.progress = 100;

        if (response.code === 200) {
          uploadItem.currentUpload.status = "success";
        } else {
          uploadItem.currentUpload.status = "fail";
        }
      }
    }
  }
};
</script>

<style scoped>
/* 这里是样式，可以忽略 */
.el-upload__tip {
  margin-top: 10px;
  font-size: 12px;
  color: #606266;
}
</style>

其中，我们使用了 Element UI 组件库提供的 Upload 组件，并通过设置 drag 和 multiple 属性来实现多文件上传。设置 action 属性来指定上传文件的服务器地址。通过设置 on-progress 事件来处理上传进度。通过设置 on-success 事件来处理上传结果。

需要注意的是，由于 Element UI 组件库并没有提供直接访问当前上传文件的 API，因此，在处理进度和结果时，需要使用 $refs 来获取 Upload 组件中当前文件上传状态对象的引用。

在 Node.js 中，可以使用 multer 中间件来处理前端发来的上传文件：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  // 处理上传文件
  // ...
  res.json({
    code: 200,
  });
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

需要注意的是，multer 中间件中的 dest 选项指定了上传文件的存储路径。在实际项目中，需要根据实际需求来设置此选项。

以上就是实现多文件上传功能的完整攻略和示例，希望能对你有所帮助。